在Vue.js中，过滤器主要用于文本的格式化，或者数组数据的过滤与排序等。从Vue.js2.0.0版本开始，内置的过滤器被删除了，如果使用过滤器，需要自己编写。过滤器可以用在两个地方：双花括号插值和v-bind表达式，使用时通过管道符（ | ）添加到表达式的尾部使用。
<!-- 在双花括号中 -->
{{ message | capitalize }}<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>过滤器本质是一个函数。Vue中的过滤器分为两种：局部过滤器和全局过滤器
一、全局过滤器：使用Vue.filter()方法来注册，该方法接收两个参数，第一个参数是过滤器的ID（即名字）,第二个参数是一个函数对象，过滤器要实现的功能在这个函数中定义。语法形式如下：
Vue.filter（id,[definition]）
示例：
<div id="app">
<input type="text" v-model="message">
{{ message | capitalize }}
</div>
<script>
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.toUpperCase();
})
new Vue({
el:'#app',
data:{
message:'java'
}
})
</script>过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
二、局部过滤器：是在Vue实例的选项对象中使用filters选项来注册
例如：
<div id="app">
<input type="text" v-model="message">
{{ message | capitalize }}
</div>
<script>
new Vue({
el:'#app',
data:{
message:'java'
},
filters:{
capitalize:function (value) {
if (!value) return ''
value = value.toString()
return value.toUpperCase();
}
}
})
</script>三、过滤器的串联：
1、{{ message | filterA | filterB }}
filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
2、过滤器是 JavaScript 函数，因此可以接收参数：
{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
四、综合示例
<style>
div{
width: 850px;
margin: 50px auto;
}
</style>
<div id="app">
<h2 style="text-align: center;">过滤器应用举例</h2>
<div>
<label>
ID：
<input type="text" placeholder="请输入编号" v-model="id" v-bind:disabled="id_flag">
</label>
<label>
Name：
<input type="text" placeholder="请输入名称" v-model="name">
</label>
<label>
Delivery Time:
<input type="datetime-local" v-model="ctime"/>
</label>
<button @click="add" v-bind:disabled="add_flag">Add</button>
<button v-bind:disabled="edit_flag" @click="edit_option">Edit</button>
<br><br>
<label>
请输入搜索关键字：
<input type="text" placeholder="请输入搜索关键字" v-model="keyword">
</label>
<button @click="search(keyword)">Search</button>
</div>
<table border="1">
<thead>
<tr>
<th width="100">编号</th>
<th width="200">名称</th>
<th width="300">出厂时间</th>
<th width="200">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in search(keyword)" :key="item.id" align="center">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | dateFormat }}</td>
<td>
<a href="#" @click.prevent="edit(item)">{{ item.options[0] }}</a>
<a href="#" @click.prevent="del(index)">{{ item.options[1] }}</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
id: '',
name: '',
ctime: new Date(),
keyword: '',
id_flag: false, //id框可用
add_flag: false,//add按钮可用
edit_flag: true, //edit按钮不可用
list: [
{ id:1001,name:'宝马520',ctime:new Date(),options:['Edit','Delete'] },
{ id:1002,name:'宝马730',ctime:new Date(),options:['Edit','Delete'] },
{ id:1003,name:'宝马X5',ctime:new Date(),options:['Edit','Delete'] },
{ id:1004,name:'奔驰s350',ctime:new Date(),options:['Edit','Delete'] },
{ id:1005,name:'奔驰s450',ctime:new Date(),options:['Edit','Delete'] },
{ id:1006,name:'红旗L5',ctime:new Date(),options:['Edit','Delete'] },
{ id:1007,name:'红旗L7',ctime:new Date(),options:['Edit','Delete'] },
{ id:1008,name:'红旗X90',ctime:new Date(),options:['Edit','Delete'] }
]
},
filters: { //局部过滤器
dateFormat: function(d){
let date = new Date(d);
let dy = date.getFullYear();
let dm = date.getMonth()+1;
dm = dm>=10?dm:'0'+dm;
let dd = date.getDate();
dd = dd>=10?dd:'0'+dd
let h = date.getHours();
h = h>=10?h:'0'+h
let m = date.getMinutes();
m = m>=10?m:'0'+m
let s = date.getSeconds();
s = s>=10?s:'0'+s
return `${dy}-${dm}-${dd}T${h}:${m}:${s}`
}
},
methods:{
add(){
let temp_id = this.id;
let temp_name = this.name;
let temp_date = this.ctime;
this.list.push({
id: temp_id,
name: temp_name,
ctime: temp_date,
options:['Edit','Delete']
});
this.id = '';
this.name = '';
this.ctime = '';
},
edit(item){
this.add_flag = true; //add按钮不可用
this.edit_flag = false; //edit按钮可用
this.id = item.id;
this.name = item.name
this.ctime = this.$options.filters.dateFormat(item.ctime);
this.id_flag = true //id框不可用
},
edit_option(){
let arr = this.list.filter(temp=>{ //查找需要编辑的元素
return temp.id === this.id
})
arr[0].name = this.name
arr[0].ctime = this.ctime
this.list = this.list.map(item=>{ //替换元素
return item.id === arr[0].id?arr[0]:item
})
this.id_flag = false //id框可用
this.add_flag = false //add按钮可用
this.edit_flag = true //edit按钮不可用
this.id=''
this.name=''
this.ctime = ''
},
del(index){
this.list.splice(index,1)
},
search(name){
var arr=[];
this.list.forEach((item,i)=>{
if(item.name.indexOf(name)!=-1){
arr.push(item);
}
});
return arr
}
}
})
</script>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
