复习Vue17：过滤器_vue利用过滤器,将价格为“20”转换为“￥20”输出。-CSDN博客

本文链接：https://blog.csdn.net/tinglis/article/details/114288019

复习Vue17：过滤器

17.1 过滤器基本使用

过滤器在日常生活中也是比较常见的，例如自来水的过滤等。

在Vue中，过滤器的作用就是格式化数据，也就是对数据的过滤处理，比如将字符串格式化为首字母大写

或者将日期格式化为指定的格式等。

下面先看一下自定义过滤器的语法

Vue.filter('过滤器名称',function(value){
//value参数表示要处理的数据
  //过滤器业务逻辑，最终将处理后的数据进行返回
})

定义好以后可以使用。使用的方式如下：

<div>{{msg|upper}}</div>
<div>{{msg|upper|lower}}</div>

具体的程序如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器基本使用</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="msg" />
      <div>
          <!--使用过滤器-->
        {{msg|upper}}
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      //定义过滤器，让输入的单词首字母变成大写.
      Vue.filter("upper", function (value) {
        //获取首字母让其转换成大写，然后拼接后面的内容。
        return value.charAt(0).toUpperCase() + value.slice(0);
      });
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

过滤器在使用的时候，可以采用如下的方式：

<div>{{msg|upper|lower}}</div>

也就是，先对msg中的数据使用upper过滤器，得到的结果在交给lower过滤器进行处理。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器基本使用</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="msg" />
      <div>
        {{msg|upper}}
      </div>
      <div>
        {{msg|upper|lower}}
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      //定义过滤器，让输入的单词首字母变成大写.
      Vue.filter("upper", function (value) {
        //获取首字母让其转换成大写，然后拼接后面的内容。
        return value.charAt(0).toUpperCase() + value.slice(0);
      });
      Vue.filter("lower", function (value) {
        return value.charAt(0).toLowerCase() + value.slice(0);
      });
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

上面定义的顾虑器是全局的过滤器，当然也可以定义局部过滤器。

局部过滤器只能在其所定义的组件内使用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器基本使用</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="msg" />
      <div>
        {{msg|upper}}
      </div>
      <div>
        {{msg|upper|lower}}
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      //定义过滤器，让输入的单词首字母变成大写.
      //   Vue.filter("upper", function (value) {
      //     //获取首字母让其转换成大写，然后拼接后面的内容。
      //     return value.charAt(0).toUpperCase() + value.slice(0);
      //   });
      Vue.filter("lower", function (value) {
        return value.charAt(0).toLowerCase() + value.slice(0);
      });
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
        //局部过滤器
        filters: {
          upper: function (value) {
            return value.charAt(0).toUpperCase() + value.slice(0);
          },
        },
      });
    </script>
  </body>
</html>

在上面的代码中，我们通过fileters定义了一个局部的过滤器upper.

在前面，我们也说过Vue实例本身就是一个组件。

17.2 带参数的过滤器

带参数的过滤器定义如下：

Vue.filter('format',function(value,arg1){
	//value表示要过滤的数据。
	//arg1,表示传递过来的参数

})

使用的方式如下

<div>
 {{data|format(`yyyy-MM-dd`)}}
</div>

要处理的数据data交给了过滤器中回调函数的value参数，yyyy-MM-dd交给了arg1.

如下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器参数</title>
  </head>
  <body>
    <div id="app">
      <div>
        {{date|format('abc','hello')}}
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      Vue.filter("format", function (value, arg, arg1) {
        console.log(arg, arg1);
        return value;
      });
      const vm = new Vue({
        el: "#app",
        data: {
          date: new Date(),
        },
      });
    </script>
  </body>
</html>

在上面的代码中，我们定义了format过滤器，然后在使用的时候，我们是将date日期数据给了value

abc这个字符串给了arg,hello给了arg1.

下面，我们把日期给具体的处理一下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器参数</title>
  </head>
  <body>
    <div id="app">
      <div>
        {{date|format('yyyy-MM-dd')}}
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      Vue.filter("format", function (value, arg, arg1) {
        let result = "";
        result +=
          value.getFullYear() +
          "-" +
          (value.getMonth() + 1) +
          "-" +
          value.getDate();
        return result;
      });
      const vm = new Vue({
        el: "#app",
        data: {
          date: new Date(),
        },
      });
    </script>
  </body>
</html>