v-if
<div class="he">
<p v-if="num==0">0</p>
<p v-else-if="num==1">1</p>
<p v-else-if="num==2">2</p>
<p v-else-if="num==3">3</p>
<p v-else-if="num==4">4</p>
<p v-else="num==5">5</p>
</div>
new Vue({
el:".he",
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
v-html
<div class="ta">
<input type="text" v-model="msg">
<p v-html="msg">{{msg}}</p>
<p v-text="msg">{{msg}}</p>
<p v-once="msg">{{msg}}</p>
<p v-pre="msg">{{msg}}</p>
</div>
new Vue({
el:".ta",
data:{
msg:"ni hao"
}
})
v-cloak
<style>
[v-cloak]{
display:none;
}
</style>
<div class="men">
<p v-cloak>{{msg}}</p>
</div>
new Vue({
el:".men",
data:{
msg:"hellow vue"
},
beforeMount:function(){
alert(111)
}
})
filter
<div class="le">
<p>{{12|addZero}}</p>
</div>
//全局过滤器
Vue.filter("addZero",function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:".le"
})
网友评论