前端杂谈 · Web

Vue之【过滤器】的使用

•̀.̫•́✧ · 6月30日 · 2020年本文2553字 · 阅读7分钟72

概念

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示

过滤器是对 即将显示的数据做进一步的筛选处理,然后显示,

过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据

私有过滤器定义

如何自定义一个私有的过滤器(局部),可以在一个组件的选项中定义本地的过滤器:

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

过滤器的使用:

  <div id="app2">
    <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
  </div>
 
<script>
    var vm2 = new Vue({
      el: '#app2',
      data: {
        dt: new Date()
      },
      methods: {},
      filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
        // 过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器
        dateFormat: function (dateStr, pattern = '') {
          // 根据给定的时间字符串,得到特定的时间
          var dt = new Date(dateStr)
 
          //   yyyy-mm-dd
          var y = dt.getFullYear()
          var m = (dt.getMonth() + 1).toString().padStart(2, '0')
          var d = dt.getDate().toString().padStart(2, '0')
 
          if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
          } else {
            var hh = dt.getHours().toString().padStart(2, '0')
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')
 
            return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
          }
        }
      }
    })
</script>

全局过滤器定义

    // 全局的过滤器, 进行时间的格式化
    // 所谓的全局过滤器,就是所有的VM实例都共享的
 
    // 过滤器的定义语法
    Vue.filter('过滤器的名称', function(){})
 
    // 过滤器中的 function ,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据
    Vue.filter('过滤器的名称', function (data) {
      return data + '123'
    }) 
 
    //过滤器调用时候的格式    
    {{ name | 过滤器的名称 }} 
    {{ name | 第一个过滤器 | 第二个过滤器(参数) }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg | msgFormat("有意")}}
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        new Vue({
            el : "#app",
            data : {
                msg : "你单身,我单身,不如咱俩去结婚。"
            },
            filters : {
                msgFormat : function(data,str){
                   return  data.replace(/单身/g,str);
                }
            } 
        });
    </script>
</body>
</html>

过滤器的基本使用

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
  </div>
 
  <script>
    // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
      return msg.replace(/单纯/g, arg + arg2)
    })
 
    Vue.filter('test', function (msg) {
      return msg + '========'
    })
 
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
      },
      methods: {}
    });
  </script>
 
</body>
</html>

注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

0 条回应