vue学习(十五) 过滤器简单实用
vue过滤器:
概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化。过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示
//过滤器调用时候的格式
{{ name | 处理的函数名 }}
//可以通过Vue.filter来自定义过滤器 data就是管道符" | " 前面的内容,也就是name
Vue.filter('过滤器名称',function(data){
return data+'hahahaha'
})
//该过滤器就是为插值表达式的name自动加上hahahaha 最终在页面上显示 的是name的值hahahaha
//html 需求:使用过滤器把单纯替换为天真 <div id="app"> <p>{{msg | msgdeal}}</p>//管道符前面的值会传递给过滤器参数
<p>{{msg | msgdealAuto('疯狂','11222333')}}</p>//将某些目标替换为 疯狂 管道符会被传递到过滤器第一个参数,过滤器参数会被传递到第二个参数
<p>{{msg | msgdeal | test}}</p>//可以连续调用多个过滤器,msg先被msgdeal处理后 再接着被test过滤器处理 最后插值表达式的值是 曾经某人也是一个天真=====的少年,天真=====的认为~~~ </div> //script <script>
//定义一个全局的过滤器 名字叫做 msgdeal
Vue.filter('msgdeal',function(msg){
return msg.replace('单纯','天真') //这样写 只会替换第一个
//replace()的第一个参数不仅可以写字符串,还可以定义一个正则表达式
return msg.replace(/单纯/g,'邪恶') //正则表达式 g全局匹配
})
Vue.filter('msgdealAuto',function(msg,arg,arg2){
return msg.replace(/单纯/g, arg+arg2)
})
Vue.filter('test',function(msg){
return msg+'====='
})
var vm = new Vue({ el:'app', data:{ msg:'曾经某人也是一个单纯的少年,单纯的认为~~~' } }) </script>