Vue的学习之路十二：过滤器

<body><div id="app"><p>{{ msg | msgFormat('疯狂', '123') | test }}</p></div><div id="app2"><p>{{ msg | msgFormat('疯狂', '123') | test }}</p></div>&lt

亥虫

3347人浏览 · 2020-05-25 14:26:49

亥虫 · 2020-05-25 14:26:49 发布

<body>
    <div id="app">
      <p>{{ msg | msgFormat('疯狂', '123') | test }}</p>
    </div>

    <div id="app2">
      <p>{{ msg | msgFormat('疯狂', '123') | test }}</p>
    </div>


    <script>
      // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
      // 全局过滤器，所有的Vue实例都能共享
      Vue.filter('msgFormat', function (msg, data, data2) {
        return msg.replace(/单纯/g, data + data2)
      })

      Vue.filter('test', function(msg){
        return msg + "========="
      })

      var vm = new Vue({
        el: '#app',
        data: {
          msg: '曾经，我也是个单纯的少年，单纯的问谁是世界上最单纯的男人',
        },
        methods: {},
      })

      // 如何自定义一个私有的过滤器
      var vm2 = new Vue({
        el: '#app2',
        data: {
          msg: '曾经，我也是个单纯的少年，单纯的问谁是世界上最单纯的男人',
        },
        methods: {},
        filters: {
          // 定义私有过滤器，过滤器有两个条件，【过滤器名称和处理函数】
          // 过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
          msgFormat: function(msg){
            return msg.replace(/单纯/g, '幼稚')
          }
        }
      })
    </script>
  </body>

全局过滤器语法：Vue.filter('过滤器的名称', function(data){})，第一个参数永远都是过滤器管道符前面传递过来的数据。
可以设置多个参数由前台传入，Vue.filter('msgFormat', function (msg, data, data2)
全局过滤器，所有的Vue实例都能共享
可以使用多个过滤器
在Vue实例中，使用filters属性定义私有过滤器，定义私有过滤器有两个条件，【过滤器名称和处理函数】
过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^