vue过滤器（屏蔽词）

使用语法

  {{变量 | 过滤器名}}

  {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

定义语法

  全局定义：

通过Vue提供的filter方法定义：Vue.filter()

参数1：过滤器的名字

参数2：过滤器执行函数

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id='app'>
        {{msg}}<br>
        {{msg | changeWord | changeWord2}}
    </div>
    <script>
        Vue.filter("changeWord", function (data, format) {
            return data.replace("大聪明", "***")
        })
        Vue.filter("changeWord2", function (data, format) {
            return data.replace("你", "***")
        })
        const vm = new Vue({
            el: '#app',
            data: {
                msg: "你可真是个大聪明"
            },
            methods: {
            },
        })
    </script>
</body>

</html>

打印

  私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

 

示例：

const vm = new Vue({
      el: "#app",
      data: {},
      methods: {
        keydown() {
          console.log(111);
        },
      },
      // 私有
      filters: {
        dateFormat(data, format) {

        }
      }

    });

 

 

  注意事项

  1. 函数的第一个参数都是data，也就是我们要过滤的值。
  2. 过滤器可以自定义一些参数。
  3. 过滤器函数的返回值就是最终显示的值

 

posted @ 2021-09-14 21:30  从入门到入土  阅读(397)  评论(0)    收藏  举报