vue中filter的使用

约定不等于承诺〃 2023-06-12 05:25 14阅读 0赞

vue中filter的使用

过滤器

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

私有过滤器

HTML元素：

\{ \{item.ctime | dataFormat('yyyy-mm-dd')\}\}

私有 filters 定义方式：

filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
    
        dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
    
          var dt = new Date(input);
    
          // 获取年月日
    
          var y = dt.getFullYear();
    
          var m = (dt.getMonth() + 1).toString().padStart(2, '0');
    
          var d = dt.getDate().toString().padStart(2, '0');
    
    
    
          // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
    
          // 否则，就返回  年-月-日 时：分：秒
    
          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}`;
    
          }
    
        }
    
      }

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；  
全局过滤器

// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, pattern = '') {
    
      var dt = new Date(input);
    
      // 获取年月日
    
      var y = dt.getFullYear();
    
      var m = (dt.getMonth() + 1).toString().padStart(2, '0');
    
      var d = dt.getDate().toString().padStart(2, '0');
    
    
    
      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
    
      // 否则，就返回  年-月-日 时：分：秒
    
      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}`;
    
      }
    
    });

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

Vue.filter( id, [definition] )
    参数：
    {string} id
    {Function} [definition]
    用法：
    
    注册或获取全局过滤器。
    
    // 注册
    Vue.filter('my-filter', function (value) {
      // 返回处理后的值
    })
    
    // getter，返回已注册的过滤器
    var myFilter = Vue.filter('my-filter')

参考：过滤器
    案例如下：
    使用|分割，过滤器可以多次调用
    
     <div id="app">
        <p>{
       { msg | msgFormat('China', '-LOVE') | 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>
    
    
    
     // 全局的过滤器， 进行时间的格式化
        // 所谓的全局过滤器，就是所有的VM实例都共享的
        Vue.filter('dateFormat', function (dateStr, pattern = "") {
          // 根据给定的时间字符串，得到特定的时间
          var dt = new Date(dateStr)
    
          //   yyyy-mm-dd
          var y = dt.getFullYear()
          var m = dt.getMonth() + 1
          var d = dt.getDate()
    
          // return y + '-' + m + '-' + d
          if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
          } else {
            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()
    
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
          }
        })
    
    
      // 如何自定义一个私有的过滤器（局部）
        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} ~~~~~~~`
              }
            }
          },
          directives: { // 自定义私有指令
            'fontweight': { // 设置字体粗细的
              bind: function (el, binding) {
                el.style.fontWeight = binding.value
              }
            },
            'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
              el.style.fontSize = parseInt(binding.value) + 'px'
            }
          }
        })