VUE中的内置指令，图文加案例，让你快速掌握，轻松使用无压力

一，v-text文本指令

此代码运行结果是

v-text与{{}}的效果一样，不过{{}}方式更简洁

二,v-html

先看示例：

 

此代码运行结果是 

可以看出v-text与v-html的差别是v-html可以识别标签

三，v-bind属性指令

示例

上述代码的页面效果如图

设置的title属性为“我学vue，我骄傲！”

v-bind后加:属性名可以直接简写成:属性名 

 四，v-if与v-else条件指令

示例

当isLog的值为false时，会执行第二个p标签，反之会执行第一个p标签，

v-if与v-else必须一起出现，之间不能有其他语句

五，多重条件v-if,v-else-if,v-else

 示例

 

六，v-for 遍历

示例

结果

此指令可以遍历对象，也可以遍历数组 

七，vue事件

点击事件示例

结果

用点击事件做一个简易的加减按钮案例

 

页面效果

 

 最后用这些指令做一个综合练习，写一个简易选项卡的案例，用到的指令有v-if条件指令,vue事件，属性指令

示例

页面效果