2、 指令
指令
指令是带有 v- 前缀的特殊属性。
指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的作用是，当表达式的值改变时，动态改变DOM元素的内容。
一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。
v-bind
动态地绑定一个或多个属性，或一个组件属性到表达式。
v-bind缩写为‘ : ’
在绑定
属性时，属性必须在子组件中声明。可以用修饰符指定不同的绑定类型。
绑定可以直接应用到 class和style，可以实现动态的切换状态。 具体可参考Class 与 Style 绑定
<template><viewv-bind:class="{active: isActive}">背景颜色测试</view></template><script>exportdefault{data() {return{isActive:false,}}}</script><style>.active{background-color:red;}</style><template><view:class="[isred ? 'bg-red' : 'bg-blue']">三元表达式背景色测试</view></template><script>exportdefault{data() {return{isred:false}}}</script><style>.bg-red{background-color:red;}.bg-blue{background-color:blue;}</style><template><viewv-bind:style="{color: activeColor, fontSize: fontSize + 'px' , background:isred ? 'red' : '' }">测试文本</view></template><script>isred:false,fontSize:30,activeColor:'blue'</script>v-on
v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件
<!-- 完整语法 --><viewv-on:click="doSomething">点击</view><!-- 缩写 --><view@click="doSomething">点击</view><script>exportdefault{...methods: {doSomething(){console.log("被点击了");this.isActive=false;this.isred=true;this.fontSize=10;this.activeColor="white";}}}</script>不常用的内容：
v-once
v-html
本课引用链接：
https://uniapp.dcloud.io/vue-basics?id=%e6%8c%87%e4%bb%a4
https://uniapp.dcloud.io/vue-basics?id=class-%e4%b8%8e-style-%e7%bb%91%e5%ae%9a
@ 课件下载、更多教程、遇到问题或者进行交流，请到： https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流
加QQ群：[326576256](https://jq.qq.com/?_wv=1027&k=YoAUx8yV)
