Vue指令简介

条件渲染

    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来处理，无需关注底层逻辑