vue.js 指令详解

Posted 2020-09-08

指令的作用：当表达式的值改变时把特殊的行为应用到DOM上，指令的值限定为绑定表达式（表达式加过滤器（0或多个））

2.1.1 v-if

　　v-if表达式值为false,对应元素从DOM中移除（相当于display:none,不占空间,最与display贴近的是下一个要介绍的元素），否则，对应元素的一个克隆将被重新插入到DOM中。

　　

  <div id="example">
      <p v-if="greeting">show or hide</p>
    </div>
    <script >
      var exampleVM2=new Vue({
        el:"#example",
        data:{
          greeting:false
        }
      })
    </script>
页面中效果图为

<div id="example">

    </div>

　　若多个元素使用v-if，可以用template标签包装起来。

　　

  <div id="example" v-if="greeting">
      <p>show or hide</p>
　　　　<p>show or hide</p>
　　　　<p>show or hide</p>
    </div>
    <script >
      var exampleVM2=new Vue({
        el:"#example",
        data:{
          greeting:false
        }
      })
    </script>


2.1.2 v-show

　　v-show值为FALSE，则自动加上display：none,v-show不支持template标签

  <div id="example">
      <p v-show="greeting">show or hide</p>
    </div>
    <script >
      var exampleVM2=new Vue({
        el:"#example",
        data:{
          greeting:false
        }
      })
    </script>
页面中效果图为
<div id="example">
     <p display="none>show or hide</p>
    </div>

v-if 与 v-show 若初始为FALSE，v-if不进行编译，v-show则进行编译，若需要频繁切换，使用v-show,若运行时条件不大可能改变，则用v-if

2.1.3 v-else

　　v-else必须跟在v-if 或者v-show后面使用， 充当else功能。示例如下：　

<div id="example">
      <p v-if="greeting">show</p>
      <p v-else="greeting">hide</p>
    </div>

因为

<div id="example">
      <custom-component v-show="greeting">show</custom-component>
      <p v-show="!greeting">hide</p>
    </div>