html5 if else 标签,v-if v-else v-else if v-html v-text v-once v-pre v-cloak filter 的使用

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;

}

}

}

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值