单个fliter
在HTML中
<div>
<p>{{message|my-filter}}</p> //前者为需要过滤的内容,后者为过滤器名
</div>
首先我们需要注册一个过滤器,下面的过滤器是一个全局过滤器
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
return //过滤后的值
})
当然我们需要在Vue实例中给message赋一个值
获取已注册过滤器
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
多个fliter
首先我们需要新建一个类,用于存储多个filter,其实这种过滤器方法感觉是自己写了一个过滤器,而没有用到Vue当中的函数
var filter = {
add: function(value){ //value用来接受需要处理的对象
return value+"+"
},
minus: function(value){
return value+"-"
}
}
那我们怎么用这个filter呢?
在HTML中,
<div id="app">
<P>{{newMsg}}</P>
</div>
在Vue实例中:
var vm = new Vue({
el:'#app',
data: {
message: 'test',
msg: "方法为"
},
computed: {
newMsg: function () {
return filters.add(this.msg)
}
}
})
测试完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试过滤器</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<p id="filter1"></p>
<p id="filter2"></p>
<p id="filter3"></p>
<div id="app">
<p>{{message|uppercase}}</p>
<P>{{newMsg}}</P>
</div>
<script type="text/javascript">
//过滤器
Vue.filter('uppercase', function(value) {
if (!value) { return ''}
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
var filters = {
add: function(value){
return value+"+"
},
minus: function(value){
return value+"-"
}
}
var vm = new Vue({
el:'#app',
data: {
message: 'test',
msg: "方法为"
},
computed: {
newMsg: function () {
return filters.add(this.msg)
}
}
})
</script>
</body>
</html>