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