1.v-if v-else v-else if 的使用
例:
<div class="itany">
<p v-if="math==0">000000000000</p>
<p v-else-if="math==1">111111111111</p>
<p v-else-if="math==2">222222222222</p>
<p v-else-if="math==3">333333333333</p>
<p v-else-if="math==4">444444444444</p>
<p v-else="math==5">555555555555</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
math:Math.floor(Math.random()*(5-0+1)+0)
}
})
注释:生成一个随机数,当条件符合任意一个时,执行所要执行的代码
2.v-html和v-text的使用
例:
<div class="itany">
<input type="text" v-model="msg">
<p v-html="msg">{{msg}}</p>
<p v-text="msg">{{msg}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
msg:'hello'
}
})
</script>
注释:v-html可以解析标签
v-text不可以解析标签
3.v-once和v-pre的使用
例:
<div class="itany">
<input type="text" v-model="msg">
<!-- v-once 只绑定一次-->
<p v-once>{{msg}}</p>
<!-- v-pre 原样输出-->
<p v-pre>{{msg}}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
msg:"hello vue"
}
})
</script>
注释:v-once 为只绑定一次的意思
v-pre 为原样输出的意思
4.v-cloak的使用
例:
<div class="itany">
<p v-cloak>{{mag}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
mag:'hello Vue'
},
beforeMount:function(){
alert(111);
}
})
</script>
注释:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
5.过滤器的使用
例:
<div id="itany">
<p>{{6|head}}</p>
</div>
<script src="vue.js"></script>
<script>
Vue.filter('head',function(data){
if(data<10){
return "0"+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
注释:过滤器:对显示在页面上的数据进行处理筛选
全局:
js:
Vue.filter("过滤器的名字",function(参数){
})
html:{{值|过滤器名字}}
局部:
<div class="itany">
<p>{{5|addZero}}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:".itany",
filters:{
addZero:function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
}
}
})
</script>