Vue的学习之路十二：过滤器
<body><div id="app"><p>{{ msg | msgFormat('疯狂', '123') | test }}</p></div><div id="app2"><p>{{ msg | msgFormat('疯狂', '123') | test }}</p></div><
·
<body>
<div id="app">
<p>{{ msg | msgFormat('疯狂', '123') | test }}</p>
</div>
<div id="app2">
<p>{{ msg | msgFormat('疯狂', '123') | test }}</p>
</div>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
// 全局过滤器，所有的Vue实例都能共享
Vue.filter('msgFormat', function (msg, data, data2) {
return msg.replace(/单纯/g, data + data2)
})
Vue.filter('test', function(msg){
return msg + "========="
})
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是个单纯的少年，单纯的问谁是世界上最单纯的男人',
},
methods: {},
})
// 如何自定义一个私有的过滤器
var vm2 = new Vue({
el: '#app2',
data: {
msg: '曾经，我也是个单纯的少年，单纯的问谁是世界上最单纯的男人',
},
methods: {},
filters: {
// 定义私有过滤器，过滤器有两个条件，【过滤器名称和处理函数】
// 过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
msgFormat: function(msg){
return msg.replace(/单纯/g, '幼稚')
}
}
})
</script>
</body>
- 全局过滤器语法：
Vue.filter('过滤器的名称', function(data){})，第一个参数永远都是过滤器管道符前面传递过来的数据。 - 可以设置多个参数由前台传入，
Vue.filter('msgFormat', function (msg, data, data2) - 全局过滤器，所有的Vue实例都能共享
- 可以使用多个过滤器
- 在Vue实例中，使用
filters属性定义私有过滤器，定义私有过滤器有两个条件，【过滤器名称和处理函数】 - 过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献9条内容
所有评论(0)