20.全局过滤器filter
过滤器的使用
moment格式化时间
过滤器的使用事项：
1.Vue.filter("过滤器的名称",过滤器的处理函数)
2.过滤器的处理函数中，第一个形参，功能已经被锁定，永远都是管道符前面的值
3.调用过滤器{{item.date | formatDate }}
4.在调用过滤器的时候可以传递参数{{item.date | formatDate("传递参数")}}
5.调用过滤器传递的参数，只能从处理函数的第二个形参开始接收，因为第一个形参已经被管道符前面的值给占用了
6.过滤器的处理函数中，必须返回一个值
7.可以连续使用管道符调用多个过滤器，最终输出的结果永远以最后一个过滤器为准
8.过滤器只能使用在插值表达中，或者v-bind中，不能使用在其他地方了，比如v-text就不支持调用过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=adge"> <title>Document</title> <script src="vue.js"></script> <script src="moment.js"></script> </head> <body> <div id="app"> id:<input type="text" v-model="id"> name:<input type="text" v-model="name"> <input type="button" value="添加" @click="add">     品牌检索： <input type="text" v-model="keywords" @change="searchName"> <table border="1"> <tr> <th>序号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> <tr v-for="item in searchName()" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <!-- 在调用过滤器的时候，要使用|线，这个|线叫做管道符 --> <td>{{item.date | formatDate | addstr("====")}}</td> <td> <a href="#" @click.prevent="del(item.id)">删除</a> </td> </tr> </table> </div> </body> <script> //Vue.filter("过滤器将来被调用的名称",过滤器的处理函数) //如果要为过滤器传递参数，则传递的参数只能在第二个形参的位置开始接收，如果要传第三个，往后加即可 Vue.filter("addstr",function(data,str){ return data+str }) //注意：过滤器处理函数中，第一个形参，作用已经被定死了，永远是管道符前面的值 Vue.filter('formatDate',function(data){ console.log("过滤器被调用了") //return data+"~~~" //导入moment.js可以使用里面的格式化时间 return moment(data).format("YYYY-MM-DD HH:mm:ss") }) //创建Vue实例，得到ViewModel var vm=new Vue({ el:"#app", data:{ id:'', name:'', keywords:'', pinpai:[ {id:1,name:"奔驰",date:new Date()}, {id:2,name:"宝马",date:new Date()}, {id:3,name:"奔奔",date:new Date()}, {id:4,name:"野马",date:new Date()} ] }, methods:{ add(){ this.pinpai.push({id:this.id,name:this.name,date:new Date()}) this.id=this.name="" }, del(id){ //console.log(id) //分析业务逻辑： //1.根据拿到的商品id,查找到对应的商品索引 //2.根据拿到的索引值，去数组中调用splice方法删除对应的那个元素 /*for(let i=0;i<this.pinpai.length;i++){ if(this.pinpai[i].id==id){ this.pinpai.splice(i,1) break; } }*/ //另一种判断id,及删除方法 const index=this.pinpai.findIndex(function(item,i,arr){ //if(item.id==id){ //return true //} return item.id==id }) this.pinpai.splice(index,1) console.log(index) }, searchName(){ //数组的filter方法，作用是循环指定的数组，并把满足回调函数中指定条件的项返回，从而得到一个新数组 /* return this.pinpai.filter((item)=>{ return item.name.includes(this.keywords) })*/ //也可以把上面三行代码变一行 return this.pinpai.filter(item => item.name.includes(this.keywords)) } } }); </script> </html>
