在vue中，指令是指带有v-前缀的vue属性。通过指令我们可以给标签设置一些制定的特性。
类似js中的innertext设置标签内的文本元素
1 <!-- v-text innerText --> 2 <p v-text="message"></p> 3 <!-- 简写方式 --> 4 <p>{{message}}</p>
类似js中innerHTML，设置标签内的内容，内部的标签会被解析渲染出来
1 <!-- v-html innerHTML --> 2 <p v-html="dom"></p>
dom: ‘<mark>大家好</mark>‘
通过控制标签的display值来实现显示和隐藏
值为Boolean类型，也可以是表达式
true为显示，false为隐藏
<div v-show="isShow"> 我是显示的 </div> <i v-show="isHide">我隐藏了</i> <script> var vm = new Vue({ el: ‘#app‘, data: { isShow:true; isHide:false } })
通过对标签的摧毁和重建来控制标签是否存在（摧毁的方法是对标签进行注释，使其不被渲染）
值为Boolean类型，也可以是表达式
true为显示，false为隐藏
1 <!-- v-if 通过控制标签是否在文档中来控制标签是否展示 --> 2 <div class="box" v-if="isShow"> 3 显示 4 </div> 5 <div class="box" v-if="isHide"> 6 隐藏 7 </div> 8 <script> 9 var vm = new Vue({ 10 el: ‘#app‘, 11 data: { 12 isShow: true, 13 isHide: false 14 }
v-if可以与v-eles-if 、v-eles 配合使用，达到判断的效果，同js的if else语句
同样的v-show语句也运用于元素的相互切换
☆v-if 一般用于切换频率低的情况中，v-show一般用于高频率的切换情景中
原文：https://www.cnblogs.com/shiluanwu/p/9157492.html