Vue 过滤器和键盘修饰符-CSDN博客

本文链接：https://blog.csdn.net/Ssss555123/article/details/126962003

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

1.作用

在我们页面显示值之前加一层过滤，展示我们过滤后的值

2.使用语法

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

3.定义过滤器

全局定义：

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

Vue.filter(//参数1 过滤器名字，参数2 函数（数据，格式（传递参数））)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{msg | getS(1)}}</div>
    <div>{{msg | getS(1) | getS1(2)}}</div>
  </div>
</body>
<script>
  //全局过滤器 都可以使用
  //参数1 过滤器名字 参数2 函数（数据，格式（传递参数））
  Vue.filter('getS',function(data,format){
    console.log(data);
    console.log(format);
    return data.replace('好好','**')
  })
  //可以使用多个过滤器
  Vue.filter('getS1',function(data,format){
    console.log(data);
    console.log(format);
    return data.replace('今天','**')
  })
  var vm = new Vue({
    el:'#app',
    data:{
      msg:'今天的天气好好啊！'
    },
    mothods:{

    }
  })
</script>
</html>

私有定义：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue-2.4.0.js"></script>
</head>
<body>
  <!-- 私有过滤器 只能在局部使用 -->
  <div id="app">
    <div>{{num}}</div>
    <div>{{num | get1(3)}}</div>
  </div>
</body>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      num:4,
    },
    methods:{
    },
    /* 私有过滤器要在filter最后加s */
    filters:{
      get1(data,n){
        console.log(data);
        console.log(n);
        return data+n
      }
    }
  })
</script>
</html>

注意：

（1）私有定义优先于全局定义被调用

（2）当全局过滤器和局部过滤器重名时，会采用局部过滤器

（3）函数的一个参数都是data，也就是我们要过滤的值

（4）过滤器可以自定义一些参数

（5）过滤器函数的返回值就是最终显示的值

平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化、时间格式化等，小伙伴们还是要了解一下的