01-05.Vue自定义过滤器

news2024/11/19 7:26:17

前言

我们接着上一篇文章01-04.Vue的使用示例：列表功能来讲。

下一篇文章 02-Vue实例的生命周期函数

过滤器的概念

概念：Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值表达式、 v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。

过滤器的基本使用

比如说，我要将data中msg 后面添加字符串。可以这样做：

（1）在差值表达式中这样调用：

        <p>{{ msg | msgFormat }</p>

上方代码的意思是说：

管道符前面的msg：要把 msg 这段文本进行过滤，
管道符后面的msgFormat：是通过msgFormat这个过滤器进行来操作。

（2）定义过滤器msgFormat：

// filter是过滤器的对象，里面可以定义多个过滤器
// 定义一个过滤器，名字叫做  msgFormat
filters: {
  msgFormat: function(msg){
    return msg + '111111'
  }
}

上方代码解释：

过滤器函数function中，第一个参数指的管道符前面的msg。
return 返回的值可以直接在页面上显示

最终，完整版代码如下：

<template>
  <div id="app">
    {{ '22222' | msgFormat }}
  </div>
</template>

<script>
export default {
  filters: {
    msgFormat: function(msg){
      return msg + '111111'
    }
  },
  data() {
    return {};
  },
  methods: {
    mySubmit: function () {
      alert("ok");
    },
  },
};
</script>

网页显示效果如下：

给过滤器添加多个参数

上面的举例代码中，{{ msg | msgFormat }}中，过滤器的调用并没有加参数，其实它还可以添加多个参数。

接下来，我们在上面的举例代码中进行改进。

改进一：过滤器加一个参数。如下：

将 msg 这个字符串进行拼接。代码如下：

<template>
  <div id="app">
    <!-- 【重要】通过 过滤器 msgFormat 对 msg 进行过滤。括号里的参数代表 function中的 arg2-->
    <p>{{ msg | msgFormat('xxx') }}</p>
  </div>
</template>

<script>
export default {
  filters: {
    msgFormat: function(msg, arg2){
      return msg + '111111' + arg2
    }
  },
  data() {
    return {
      msg: "聆听感受思考"
    };
  },
  methods: {
    mySubmit: function () {
      alert("ok");
    },
  },
};
</script>
<style>
#app{
  color: black;
}
</style>