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 元素之后。
<div id="itany">
<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>
<script src='vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
num:Math.floor(Math.random()*(5-0+1)+0)//随机数
}
})
</script>
v-html：操作元素中的HTML标签
v-text:操作元素的纯文本
案例：
<div id="itany" v-html='message'>
{{ message }}
</div>
<script src='vue.js'></script>
<script>
new Vue({
el : "#itany",
data : {
message :'<b>哈</b>'
}
})
</script>
结果：输出加粗的哈，而不是输出<b>哈</b>，可以解析HTML元素
<div id="itany" v-html='message'>
{{ message }}
</div>
<script src='vue.js'></script>
<script>
new Vue({
el : "#itany",
data : {
message :'<b>哈</b>'
}
})
</script>
结果：输出<b>哈</b>，v-text不能解析HTML元素，只会照样输出
v-cloak:使用 v-cloak 防止页面加载时出现 vuejs 的变量名
<html>
<head>
<style>
[v-cloak]{
display: none; //使用v-cloak时必须配合style中的display：none使用
}
</style>
</head>
<body>
<div id="itany">
<p v-cloak>{{message}}</p>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
message:'Hello Vue.js'
},
beforeMount:function(){
alert(111)
}
})
</script>
</body>
</html>
v-once:只绑定一次
pre:原样输出
案例：
<body>
<div id="itany">
<input type="text" v-model='message'>
<!-- 只绑定一次-->
<p v-once>{{message}}</p>
<!-- 原样输出-->
<p v-pre>{{message}}</p>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
message:'Hello World!'
}
})
</script>
</body>
过滤器:全局过滤器
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
<!-- 在双花括号中 -->
{{ message | capitalize }}
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
局部过滤器：
new Vue({
el:'#itany',
data:{},
methods:{},
filters:{
addZero:function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
}
}
})
网友评论