vue或angular 写filter时,传入的是对象时一定注意,不能直接改变对象的值,因为在使用该filter的页面上,若传入的对象其他值发生变化,该filter也会重新运行,这样可能会报错,如下例子会产生undefined的对象值
下面的例子是利用vue vant ,arrtoArr是将['0','2']---->'问题1,问题3'的格式在页面中显示
页面
<div v-for="item,index in list" v-if="list.length!=0"> {{item.parstr | filtertest}}:{{item.pararr | arrtoArr}} //item对象的count值变化也会触发两个filter的变化 <span class="count"> <span @click="updateCount('deduce',index)"> <i class="van-icon van-icon-reduce-o"></i> </span> {{item.count}} <span @click="updateCount('add',index)"> <i class="van-icon van-icon-add-o"></i> </span> </span> </div>
页面对应的数据和方法
data:{ return { list:[ { parsrt:1, pararr:['2','1'], desc:'', count:0 }, { parstr:2, pararr:['1','4','5'], desc:'', count:0 } ] } } , methods:{ updateCount(oprt,index){ if(oprt=='reduce'){ if(this.serviceList[index].count<=1){ this.$dialog.confirm({ title: '警告', message: '确认删除么' }).then(() => { this.serviceList.splice(index,1); }).catch(() => { }); }else{ this.serviceList[index].count--; //一定注意此处serviceList的内部的某一个对象的count变化了,上面页面的两个filter都会重新运行 } }else{ this.serviceList[index].count++; } } }
filter.js
Vue.filter('arrtoArr',function(par){ var comparlist = { 0:'问题1', 1:'问题2', 2:'问题3', 3:'问题4', 4:'问题5', 5:'问题6', 6:'问题7', 7:'问题8', 100:'问题9' } var arr = [] if(par==undefined||par.length<1){ return '' }else{ for(var i=0;i<par.length;i++){ var tt = par[i] //此处不可直接改变其par参数的值 arr.push(comparlist[tt]) } return arr.join(','); } })