过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数
假设有一个用于把内容转为大写的过滤器函数 toUpperCase
{{content|toUpperCase}}
-
|: 管道符，表示数据从左至右通过管道符进行传递 - 过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果
注册过滤器
全局过滤器
Vue.filter("过滤器名称", 过滤器函数);
局部过滤器
Vue.component('组件', {
...,
filters: {
'过滤器名称': 过滤器函数
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item of items">
<span>名称： {{item.name}}</span>
<span> - </span>
<span>价格： {{item.price | head | foot('***')}}</span>
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
//vue提供的过滤器
Vue.filter('head',(price,flag="$")=>{
return `${flag}` + (price / 100).toFixed(2);
});
Vue.filter('foot',(price_two,flag_two='$')=>{
return price_two + `${flag_two}`;
});
//对内容(数据),进行二次操作(过滤)
let app = new Vue({
el:'#app',
data:{
items:[
{id:1, name:'yo',age:'17',price:"300000"},
{id:2, name:'xn',age:'22',price:"500000"},
{id:3, name:'wt',age:'20',price:"600000"}
]
}
});
</script>
</body>
</html>
网友评论