Vue filter过滤器
过滤器作用:
在不改变数据的情况下，输出前端需要的格式数据
过滤器的定义：
Vue.filter("过滤器名称",("过滤内容")=>{
过滤内容的处理
return 过滤后内容;
})
过滤器的使用
<p>{{数据|过滤器名称}}</p>
Filter过滤器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<h1>{{str|test}}</h1>
</div>
<script src="vue.js"></script>
<script>
Vue.filter("test",function (val) {
var next = val.split("").reverse().join("");
return next;
})
Vue.filter("tee",function (val) {
var a = val.split("").reverse().splice(2,3).join("");
return "昨天"+a;
})
let vu = new Vue({
el:"#app",
data:{
str:"今天天气好",
},
filters:{
test:function(val){
return val.split("").reverse().join("");
}
}
})
</script>
</body>
</html>
注意 ：在没有冲突的情况下fileter过滤器可以串联 过滤器要在创建实例vue之前创建 但是：filters可以写在Vue实例内位置不限
用途 ：在不改变原始数据的情况下 让页面显示想要的处理后的数据
浙公网安备 33010602011771号