vue02

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"

})