条件渲染
v-if：根据其后的Boolean值判断是否渲染该元素 （操作DOM）
v-else：该指令必须紧跟在v-if或v-else-if元素的后面，否则它将不会被识别
data: {status: '3'}
v-show：只会渲染其身后Boolean表达式为false的元素 （不操作DOM只是单纯的控制css的display:none或block）
循环渲染
v-for:这个指令必须使用特定的语法 item in items，items是源数据数组并且 item是数组元素迭代的别名。
HTML
data
页面输出
一般是给数组或对象指定别名，我们还可以为索引指定别名，常用情况如下：
你也可以将in替换成of，因为它是最接近javascript迭代器的语法
v-text：操作元素中的出文本内容
v-html：操作元素中的html标签内容
v-model：常用于表单控件元素上创建数据双向绑定input、select、text、checkbox、radio等
v-bind：动态地绑定一个或者多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class
class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名
动态绑定active类名只是改变了字体颜色未覆盖bind类名原来的样式
v-on：绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：
在changeColor方法中，我们更新了应用状态，但没有触碰DOM，所有DOM操作由VUE来处理，无需关注底层逻辑
网友评论