一,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事件,属性指令
示例
页面效果