Vue 详解filter
vue中的过滤器filter分两种：
1.本地过滤器：在组件中定义和使用
2.全局过滤器：在全局定义和使用，但必须在创建Vue实例前定义
<!DOCTYPE html>
<html>
<head>
<title>filter</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var App = {
template:`<div>
<p>{{msg | addHouzhui('本地过滤器：邮箱：','@qq.com')}}</p>
<p>{{msg | addPhoneLogo('全局过滤器：')}}</p>
<p>{{msg | addPhoneLogo('全局过滤器：') | addHouzhui('本地过滤器:','@qq.com')}}</p>
</div>`,
data() {
return {
msg:'213223'
}
},
filters:{ //本地过滤器
addHouzhui(data,arg1,arg2) {
return arg1+data+arg2;
}
}
}
//全局过滤器：要在创建Vue实例前定义
Vue.filter('addPhoneLogo',function(data,arg1) {
return arg1 + data;
})
new Vue({
el:document.getElementById('app'), //这样写更优化些，免去vue获取字符串后判断.也可写成el:'#app',但vue 获取到字符串后需进行判断
components: {
app:App //重命名为app
},
template:'<app />'
})
</script>
</body>
</html>返回下图：