做网站需要哪些技术支持,北京模板网站开发公司,微信企业网站html5模板,浙江网站建设网站优化VUE学习第三天 过滤器filter全局过滤器私有过滤器 过滤器filter
作用#xff1a;常见的文本格式化使用场景#xff1a;插值表达式、v-bind用法#xff1a;{{msg | filterName}} ; v-bind:属性‘msg | filterName’ msg:需要格式化的文本信息#xff08;管道符前面的数据常见的文本格式化使用场景插值表达式、v-bind用法{{msg | filterName}} ; v-bind:属性‘msg | filterName’ msg:需要格式化的文本信息管道符前面的数据 ‘|’:管道符 filterName:过滤器名称 全局过滤器
写在main.js文件中全部vue文件都可以使用全局过滤器 Vue.filter( id,call( ) ) id:过滤器名称 call():回调函数。两个参数data需要过滤的文本信息、format使用过滤器时传入的参数。 回调函数中的返回值return 会被渲染到页面上 在main.js文件中定义一个全局过滤器filterText将需要过滤的文本信息中的”过滤器“替换为”filter“
Vue.filter(filterText,function(data,format){console.log(format)return data.replace(过滤器,filter)
}).vue文件中使用过滤器
script
export default {name: filterPage,data() {return {msg: 全局过滤器,//过滤之后结果为“全局filter”}}
}
/scripttemplatedivdiv{{ msg|filterText }}/div/div
/template私有过滤器
写在**.vue文件的script标签**中与data和methods平级只有在当前vue文件中才能使用 filters{ id(data,format){ } } 在.vue文件中定义两个私有过滤器filter1filter2将msg1中的’private’替换成“私有”作为format参数传入再将filter1过滤之后的内容再次进行过滤’filter’替换成“过滤器”
script
export default {name: filterPage,data() {return {msg1: 私有filter是私有的}},filters: {filter1(data, format) {console.log(format)return data.replace(private, format)},filter2(data, format) {console.log(format)return data.replace(filter, format)}}
}
/scripttemplatedivdiv{{ msg1|filter1(私有) }}/div//“私有filter是私有的”div{{ msg1|filter1(私有)|filter2(过滤器) }}/div//“私有过滤器是私有的”/div/template连用多个filter时后一个filter的data是上一个filter的返回值
