介绍为什么要使用vue & lt; !——,在双花括号中,——比;
{{,name |, Upper }}
& lt; !——,在,“v-bind”,中,——比;
& lt; div v-bind: id=癿artin |, Upper"祝辞& lt;/div> Vue.filter(& # 39;上# 39;,function (名字),{
,,,return name.toUpperCase ();
}); , var Vue ({vm=new
el:,,,, & # 39; #应用# 39;
数据:,,,,{
,,,,,名字:& # 39;马丁# 39;
,,,},
,,,过滤器:{
,,,,,上:function (名字),{
,,,,,,,return name.toUpperCase ()
,,,,,}
,,,}
})才能 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>,, & lt; meta charset=癠TF-8"比;
& lt;才能title> Title</title>
& lt;才能script src=啊?引导/js/jquery-1.10.1.js"祝辞& lt;/script>
& lt;才能link rel=皊tylesheet", href=啊?引导/css/bootstrap.min.css"比;
& lt;才能script src=啊?引导/js/bootstrap.min.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt;才能div 类=癴orm-inline"比;
,,,& lt; label> id:
,,,,,& lt; input 类型=皌ext",类=癴orm-control",占位符=扒胧淙肽愕膇d", v模型=癷d"比;
,,,& lt;/label>
,,,& lt; label>名称:
,,,,,& lt; input 类型=皌ext",类=癴orm-control",占位符=扒胧淙肽愕膎ame", v模型=皀ame"比;
,,,& lt;/label>
,,,& lt; button 类=癰tn btn-success", @click=癮dd"祝辞add
,,,& lt; label>请输入你的搜索关键字:
,,,,,& lt; input 类型=皌ext",类=癴orm-control",占位符=扒胧淙肽愕乃阉鞴丶帧?v模型=発eyword"比;
,,,& lt;/label>
,,,& lt; button 类=癰tn btn-success", @click=八阉?关键字)“祝辞search
& lt;才能/div>
& lt;才能table 类=皌able table-bordered table-hover table-striped"比;
,,,& lt; thead>
,,,& lt; tr>
,,,,,& lt; th> id
,,,,,& lt; th> name
,,,,,& lt; th> ctime
,,,,,& lt; th> operation
,,,& lt;/tr>
,,,& lt;/thead>
,,,& lt; tbody>
,,,& lt; tr v=?项目,i),搜索(关键字)“,拷贝:关键=癷tem.id"比;
,,,,,& lt; td> {{item.id}} & lt;/td>
,,,,,& lt; td> {{item.name}} & lt;/td>
,,,,,& lt; td> {{item.ctime | dateFormat}} & lt;/td>
,,,,,& lt; td>
,,,,,,,& lt; a href=?”,类=癰tn btn-success", @click.prevent=?“在{{item.operation [0]}} & lt;/a>
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了怎么在vue项目中实现一个过滤器功能,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:
vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
<>强过滤器
1。过滤器规则
vue。js允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:
双花括号插值{{}}和,v-bind表达式(后者从2.1.0 +开始支持)。过滤器应该被添加在JavaScript表达式的尾部,由“管”道符号指示:
过滤器分为全局过滤器和本地过滤器,全局过滤器顾名思义就是所有Vue实例挂载的元素内都能使用,而本地过滤器则是指只有过滤器函数所在的Vue实例挂载的元素内可以使用
全局过滤器:
本地过滤器:
<强> 2。串联过滤器
<代码>{{名称| filterA | filterB}}
解释:
第一步:先把名字放到filterA过滤器中进行过滤
第二步:将第一步过滤器的结果再放到filterB再进行过滤,显示最终过滤结果
<强> 3。过滤器也可以接收参数,因为过滤器说到底只是一个函数
<代码>{{名称| filterA (& # 39; __arg1 # 39;,最长)}}
解释:
filterA在这里应该定义为接收三个参数的过滤器函数。其中名称的值作为第一个参数,字符串__arg1作为第二个参数,表达式,arg2 的值作为第三个参数。
最后送给大家一个实例:
源代码:
