Vue的指令操作

指令

• 使用形式：

  • 绑定在dom的属性身上
  • 为了区别自定义属性，vue提供的指令都携带 v-

• 数据展示

  • v-html 非转义输出 ， 可以解析 xml类型数据

  • v-text

      <div id="app">
                <h3> 数据展示 </h3>
                <p> {{ msg }} </p>
                <p v-html="msg"></p>
                <p v-text="msg"></p>
    </div>
     <script src="../lib/vue.js"></script>
    <script>           
    new Vue({
            el: '#app',
            data: {
                msg: '<div> hello Vue.js</div>',
                  }
            })
    </script>
    

• 条件渲染

  • v-if

  • v-else-if

  • v-else

       <div id="app">       
                 <p v-if="flag"> 条件 - 单路分支 </p>
                <h4> 条件渲染 - 双路分支 </h4>
                <p v-if="flag1"> 条件 - 双路 - 1 </p>
                <p v-else> 条件 - 双路 - 2 </p>
                <h4> 条件渲染 - 多路分支 </h4>
                <p v-if=" type === 'A'"> 条件 - A </p>
                <p v-else-if="type === 'B'"> 条件 - B </p>
                <p v-else> 条件 - C </p>
       </div>
    
    <script src="../lib/vue.js"></script>
    <script>           
    new Vue({
            el: '#app',
            data: {
                flag: false,
                flag1: true,
                type: 'A',
                 }
            })
    </script>
    

• 条件展示

  • v-show

     <div id="app">  
        <p v-show="flag2"> 条件 - 展示 </p>
    </div>
    <script src="../lib/vue.js"></script>
    <script>           
    new Vue({
            el: '#app',
            data: {
                flag2: false,
                 }
            })
    </script>
    

  • v-if vs v-show

    • v-if是真正的控制dom的存在与否，v-show 是控制dom的display:none属性
    • 如果初始条件都为false,v-if会惰性渲染【 不渲染 】，但是v-show不管条件是什么都会渲染，所以v-show的初始渲染开销较高
    • 如果我们要频繁的切换flag,那么我们使用谁? 我们使用 v-show ， 反之，使用v-if