过滤器是显示在页面上的数据进行处理筛选操作
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
分为：全局过滤和局部过滤
全局过滤：
vue.filter('过滤器的名字'，function( ){ })
Vue指令：
v-else： 不需要表达式 前一兄弟前必须有v-if或者v-else-if
v-html：单项数据绑定 可识别标签
v-text：单项数据绑定 不可识别标签
v-once: 只绑定一次 不需要表达式
v-pre：原样输出
v-cloak：保持在元素上直到关联实例结束翻
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 元素之后
全局过滤器：vue.filter("guolvqi
保留两位数字的过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="lgy">
<p>{{123.456|number}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#lgy',
filters:{
number:function(data){
return:data.toFixed(2)
}
}
})
</script>
</body>
</html>
局部过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="lbx">
<p>{{8|addZero}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{},
methods:{},
//局部过滤器
filters:{
addZero:function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
}
}
})
</script>
</body>
</html>
网友评论