vue 指令的用法

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

　　1.　　v-text 指令　

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

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

　　

　　2.　　v-html 指令

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

<!-- v-html  innerHTML -->
　　<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 指令

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

　　　　　　　值为Boolean类型，也可以是表达式

　　　　　　　true为显示，false为隐藏 

<!--  v-if  通过控制标签是否在文档中来控制标签是否展示   -->
        <div class="box" v-if="isShow">
            显示
        </div>    
        <div class="box" v-if="isHide">
            隐藏
        </div>    
        <script>
            var vm = new Vue({
                el: '#app', 
                data: {
                isShow: true,
                isHide: false
            }

　　　　　　　　v-if可以与v-eles-if 、v-eles  配合使用，达到判断的效果，同js的if else语句

　　　　　　　　同样的v-show语句也运用于元素的相互切换

　　　　　　　　　　☆v-if 一般用于切换频率低的情况中，v-show一般用于高频率的切换情景中