vue之v-if,v-else,v-else-if

909 阅读1分钟

这几个指令与javascrpit的if判断有些相似这些指令可以根据表达式的布尔值在dom中渲染或者销毁元素或组件

例子

<body>

   <div id="app"> 

     <h2>{{counter}}</h2>

     <button v-on:click="btn1">+</button> 

      <button @click="btn2">-</button> 

      <h2 v-if="aa">bbb</h2>      //当v-if布尔值为true时候显示bbb

      <h2 v-else>v-if是假显示</h2>    //否则当为false则显示此内的内容

      <h2 v-else-if=""></h2> 

   </div>

   <script>

     const app =new Vue({ 

           el:'#app', 

           data:{ counter:0, message:'aaa', aa:true, bb:false }, 

           methods:{

                 btn1(){ this.counter++ }, 

                 btn2(abc){ this.counter--, console.log('+++++',event) }

              } 

          }) 

   </script> 

 </body>

v-if和v-show的区别

他们都是在为true时候显示但是v-if在false时候是删除这行代码,在true时再创建这行代码

而v-show在false时添加属性display:none,并不删除。所哟当多次显示消失时用推荐

v-show而一次时候用v-if。