Vue:v-if v-else-if v-else v-html v-text v-cloak v-once v-pre 过滤器

v-if v-else-if v-else 都是判断语句
案例:如果生成的随机数是0输出我是0,如果生成的随机数是1输出我是1,如果生成的随机数是2输出我是2,如果生成的随机数是3输出我是3,如果生成的随机数是4输出我是4,如果生成的随机数是5输出我是5
v-else元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
类似于 v-else,v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。


我是0


我是1


我是2


我是3


我是4


我是5





v-html:操作元素中的HTML标签
v-text:操作元素的纯文本
案例:


{{ message }}

new Vue({
el : "#app3",
data : {
message :''
}
})
结果:输出加粗的哈,而不是输出,可以解析HTML元素


{{ message }}

new Vue({
el : "#app3",
data : {
message :''
}
})
结果:输出,v-text不能解析HTML元素,只会照样输出

v-cloak:使用 v-cloak 防止页面加载时出现 vuejs 的变量名
body部分:


{{message}}



style部分:使用v-cloak时必须配合style中的display:none使用

[v-cloak]{
display: none;
}
js部分:

new Vue({
el:'#app',
data:{
message:'Hello Vue.js'
},
beforeMount:function(){
alert(111)
}
})
v-once:只绑定一次
pre:原样输出

案例:
body部分:




{{message}}



{{message}}



js部分:

new Vue({
    el:'#app',
    data:{
        message:'Hello World!'
    }
})

过滤器:全局过滤器

过滤器可以用在两个地方:双花括号插值和 v-bind 表达式


{{ message | capitalize }}
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示

  Vue.filter('addZero',function(data){
    if(data<10){
        return '0'+data;
    }else{
        return data;
    }
})

局部过滤器:

new Vue({
el:'#app',
data:{},
methods:{},
filters:{
addZero:function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
}
}
})

你可能感兴趣的:(Vue:v-if v-else-if v-else v-html v-text v-cloak v-once v-pre 过滤器)