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

Posted xuchao0506

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于vue学习(十五) 过滤器简单实用的主要内容,如果未能解决你的问题,请参考以下文章

vue实现简单的过滤器

30 段 Python 实用代码

Python机器学习(十五)朴素贝叶斯算法原理与代码实现

即学即用的 30 段 Python 实用代码

QT 实用代码片段

译文:18个实用的JavaScript代码片段,助你快速处理日常编程任务