vue学习(十五) 过滤器简单实用

Posted 2021-11-29 xuchao0506

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>