vue 条件语句

• v-if

如果是true那么显示元素，否则删除元素
在元素中使用v-if
在模板中使用v-if
下面是一个例子：

<div id="vif">
   <template v-if="bool1">
       <p>{{'bool1'}}</p>
   </template>
   <p v-if="bool2">{{'bool2'}}</p>
</div>

注:template并不会显示在页面上

• v-else

要与v-if同级

<div id="vifelse">
   <div v-if="randomCompareTo0_5()">
       {{'>0.5'}}
   </div>
   <div v-else>
       {{'<=0.5'}}
   </div>
</div>

var vifelse=new Vue({
   el:"#vifelse",
   data:{
       random:0
   },
   methods:{
       randomCompareTo0_5:function () {
           this.random=Math.random();
           return this.random>0.5;
       }
   }
});

• v-else-if

<div id="vifelse">
   <div v-if="randomCompareTo0_5()">
       {{'>0.5'}}
       <div v-if="true">
           {{'true'}}
       </div>
       <div v-else>
           {{'false'}}
       </div>
   </div>
   <div v-else-if="random>0.3">
       {{'>0.3'}}
   </div>
   <div v-else>
       {{'<=0.3'}}
   </div>
</div>

• v-show

相当于只有v-if

<div id="vifelse">
   <div v-show="randomCompareTo0_5()">
       {{'>0.5'}}
   </div>
</div>