一、Filter 过滤器，将数据进行添油加醋的操作。
过滤器分为两种：
1、组件内的过滤器（组件内有效）
2、全过滤器（所以组件共享）
使用前首先注册过滤器，然后再使用。
全局过滤器： Vue.filter('过滤器名称', 过滤器 fn(value, arg1))
// 全局过滤器
Vue.filter('myReverse', function(value, arg1){
return arg1+"-"+value.split('').reverse().join('');
});
组件内注册过滤器： filter : { 过滤器名称 : 过滤器 fn(value) }，最终 fn 内通过 return 产生最终的数据。
var App = {
template:`
<div>
<input type='number' name='price' v-model='price'/>
<p>{{price | myCurrency}}</p>
</div>
`,
data(){
return{
price:0,
msg:'hello filter'
}
},
filters:{
myCurrency:function(value){
return '¥' + value;
}
}
}
使用方法： {{ 原有数据 | 过滤器 }}
过滤器 fn ：
1、声明 function(data, arg1, arg2...){ return }
2、使用 {{ 数据 | 过滤器名(参数1, 参数2) }}
<!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"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
// 全局过滤器
Vue.filter('myReverse', function(value, arg1){
return arg1+"-"+value.split('').reverse().join('');
});
var App = {
template:`
<div>
<input type='number' name='price' v-model='price'/>
<p>{{price | myCurrency}}</p>
</div>
`,
data(){
return{
price:0,
msg:'hello filter'
}
},
filters:{
myCurrency:function(value){
return '¥' + value;
}
}
}
new Vue({
el:'#app',
template:`<App/>`,
components:{
App
}
});
</script>
</body>
</html>
标签：Vue,return,arg1,value,filter,过滤器 From： https://www.cnblogs.com/sfwu/p/16898370.html