过滤器

1.过滤规则

Vue.js允许您自定义过滤器，过滤器可用于一些常见的文本格式。过滤器可以在两个地方使用：

双花括号插值{{}}和v-bind表达式(后者从2.1.0开始支持)。过滤器应该添加在JavaScript表达式的末尾，由“管道”符号表示：

！-在双花括号中-{{name | upper}}！-在' v-bind '中，-div v-bind : id=' Martin | upper '/div筛选器分为全局筛选器和局部筛选器。顾名思义，全局过滤器可以用在Vue实例挂载的所有元素中，而局部过滤器意味着只能使用过滤器功能所在的Vue实例挂载的元素。

全局筛选器：

Vue.filter('Upper ')，函数(name){ return name . touppercase()；});本地过滤器：

varvm=new vue({ El : ' # app }，data: {name3360' Martin'}，filter s : { upper 3360 function(name){ return name。touppercase ()}}) 2。串联过滤器

{{name | filterA | filterB }}

解释一下：

第一步：首先将名称放入过滤器过滤的过滤器

第二步：将第一步过滤的结果放入filterB进行过滤，显示最终的过滤结果

3.过滤器也可以接收参数，因为过滤器毕竟只是一个函数

{{ name | filterA('arg1 '，arg2) }}

解释一下：

FilterA在这里应该定义为接收三个参数的滤波器函数。name的值是第一个参数，字符串arg1是第二个参数，表达式arg2的值是第三个参数。

最后，我给大家举个例子：

源代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title script src=' http :/bootstrap/js/jquery-1。10 .1 .js/脚本链接rel='样式表href=' ./bootstrap/CSS/bootstrap。量滴CSS ' script src=' http :/bootstrap/js/bootstrap。量滴js '/script/headdydiv id=' app ' div class=' form-inline ' labelid :输入类型=' text '类=' form-control '占位符='请输入你的id ' v-model=' id '/label标签名称：输入类型=' text '类=' form-control '占位符='请输入你的name ' v-model=' name '/label button class=' BTN BTN-success ' @ click=' add ' add/button label请输入你的搜索关键字：输入类型=“文本”类=“表单控件”占位符='请输入你的搜索关键字v-model='关键字'/标签按钮class=' BTN BTN-成功' @ click=' search(关键字)' search/button/div table class=' table table-带边框的表格-悬停table-striped ' d tr thid/th th name/th ctime/th thooperation/th/tr/d t body tr-for='(item，I)in search(关键字)' : key=' item。 id ' TD { { item }。id } }/TD TD { { item }。名称} }/TD TD var DM=日期。get month()1；var DD=日期。getdate()；var DH=日期。gethours()；var DM=日期。getminutes()；var ds=日期。getseconds()；退货` $ { dy }-$ { DM }-$ { DD } $ { DH } : $ { DM } : $ { ds } ` })；var vm=new Vue({ el: '#app '，data: { keyword: ' '，id: ' '，name: ' '，list:[{id:1，name: '宝马，ctime:new Date()，operation:['add '，' delete']}，{id:2，name: '奔驰，ctime:new Date()，operation:['add '，' delete']}，{id:3，name: '大众，ctime:new Date()，operation:['add '，' delete']} ] }，methods : { add(){ var curid=this。id；var cur name=this . name this . list . push({ id : curid，name:curname，ctime:new Date()，operation:['add '，' delete ']})；this.id=this.name=}，del(i){ this.list.splice(i，1)；}，search(name){ var arr=[]；this.list.forEach((item，i)={ if(item.name.indexOf(name)！=-1){ arr。推送(项目)；} });return arr } } })/脚本/正文/html总结

以上所述是小编给大家介绍的某视频剪辑软件中的过滤器实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！