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>