Vue2-过滤器篇

75 阅读1分钟
 <div>{{parentName|all }}</div>
 new Vue({    
     el:document.getElementsByTagName("div")[0],
     data(){        
         return {            
             parentName:111
         }
     },    
     filters:{
         all(){  return "我是过滤器" }
     }
 })

以上模板会被解析成为下面的渲染函数

 (function() {      
     with(this) {            
         return _c('div',[                
             _v(_s(_f("all")(parentName)))            
         ])      
     }
 })

_f方法指resolveFilter方法,resolveFilter方法会去调用resolveAsset方法,resolveAsset方法会返回options选项内容的filter方法(用户自定义),之后模板函数将key和值传进去就得出结果了。

fitler 其实就是从组件选项 filters 获取你设置的某个filter,并调用,然后使用你函数执行的返回值渲染