开发者学堂课程【Vue.js 入门与实战:过滤器-定义私有过滤器】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8148
过滤器-定义私有过滤器
目录
一、全局过滤器
二、自定义私有过滤器
一、全局过滤器
<div id=”app”> </div> <div id=”app2”> {{1+1}} </div> <script> Vue.filter(‘dateformat’,function(datstr,pattern=””){ }) Var vm = new Vue {{ })
因为第一个 div 被 vm 控制,而第二个 div 没有被控制,所以{{1+1}}原样输出。可以创建一个新的 vm 对象,控制 div
var vm2 = new vue( { el:'#app2’,//el 是控制的元素 data:{
这样输出结果就为2
输出 vm2 的时间
var vm2 = new vue( { el:'#app2’,//el 是控制的元素 data:{ dt: new Date() }, <div id=”app2”> <h3>{{dt}}</h3> </div>
演示结果:
上面属于 app1 ,下面属于app2,这两个不属于一个vm对象,分别由各自的 vm 对象来控制。
在全局过滤器中所有的 vm 实例都能够共享。
二、自定义私有过滤器
给 vm2 自定义一个私有的过滤器
var vm2 = new vue( { el:'#app2’,//el 是控制的元素 data:{ dt: new Date() }, methods:{} filters:{// methods和filters都是对象,定义私有过滤器,过滤器有两个条件 【过滤器名称和处理函数】。 Dateformat:function(dateStr,pattern=’’) { var dt = new Date(datestr) //每个名称都要对应处理的函数,第一个参数是过滤器传过来的数据, //yyyy-mm-dd var y=dt.getrullYear() var m=dt.getMonth()+1 var d = dt.getDate() If (pattern.tolower case() ===" yyyy-mm-dd') { Return ‘$(y)-$(m)-$(d) } else { var hh =dt.getHours() var mm =dt.getMinutes() var ss = dt.getSeconds() return“${y}-${m}-${d} $(hh):$(mm):$(ss) } } } } )
调用过滤器时,采用的是就近原则,如果私有过滤器和全局过滤器名称一致,则优先调用私有过滤器。