vue 指令的用法

　　在vue中，指令是指带有v-前缀的vue属性。通过指令我们可以给标签设置一些制定的特性。

　　1.　　v-text 指令　

　　　　　类似js中的innertext设置标签内的文本元素

1 <!-- v-text innerText -->
2 　　<p v-text="message"></p>
3 <!-- 简写方式 -->
4 　　<p>{{message}}</p>

　　

　　2.　　v-html 指令

　　　　　　类似js中innerHTML，设置标签内的内容，内部的标签会被解析渲染出来

1 <!-- v-html  innerHTML -->
2 　　<p v-html="dom"></p>

　　dom: '<mark>大家好</mark>'

　　

　　3.　　v-show 指令

　　　　　　通过控制标签的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
            }
    })     

　　4.　　v-if 指令

　　　　　　　通过对标签的摧毁和重建来控制标签是否存在（摧毁的方法是对标签进行注释，使其不被渲染）

扫描二维码关注公众号，回复： 1530753 查看本文章

　　　　　　　值为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一般用于高频率的切换情景中