Vue过滤器

最新推荐文章于 2024-09-05 13:30:00 发布

北海之灵

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量385

点赞数 2

分类专栏： Vue 文章标签： Vue filter 过滤器

本文链接：https://blog.csdn.net/xukongjing1/article/details/81607011

版权

Vue 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

1.全局过滤器

Vue允许你自定义过滤器，可被用作一些常见文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在JavaScript 表达式的尾部，由 "管道"符指示。
过滤器的语法
过滤器中的function，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据。

 /*过滤器的语法*/
  //过滤器中的function，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据
  Vue.filter('过滤器的名称',function(data){
    return data+'123';
  });

过滤器调用时候的格式，{{name | 过滤器的名称}}

例子1：使用过滤器格式化输出日期。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <!--这里调用了2个过滤器-->
    <p>{{dt | dateFormat('') | test}}</p>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  Vue.filter('dateFormat',function(dateStr,pattern=""){
    //根据给定的字符串，得到特定的时间格式。
    var dt = new Date(dateStr)
    var y = dt.getFullYear()
    var m = dt.getMonth()+1
    var d = dt.getDate()
    
    if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd'){
      return `${y}-${m}-${d}`
    } else {
      var hh = dt.getHours();
      var min = dt.getMinutes();
      var ss = dt.getSeconds();
      return `${y}-${m}-${d} ${hh}:${min}:${ss}`
    }
  });
  Vue.filter('test',function(msg){
    return msg + "-----";
  });
  var vm = new Vue({
    el:'#app',
    data:{
      dt:new Date(),
    },
  });
</script>
</html>

2.私有过滤器

私有过滤器定义在Vue对象内部，只能由定义它的这个Vue对象使用。

定义私有过滤器，过滤器由2个条件，【过滤器名称和处理函数】。

过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器。

例子2：同时定义全局过滤器和私有过滤器。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    这儿使用全局过滤器
    <p>{{dt | dateFormat('')}}</p>
  </div>
  <div id="app2">
    这儿使用私有过滤器
    <p>{{dt | dateFormat('')}}</p>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  //全局过滤器
  Vue.filter('dateFormat',function(dateStr,pattern=""){
    //根据给定的字符串，得到特定的时间格式。
    var dt = new Date(dateStr)
    var y = dt.getFullYear()
    var m = dt.getMonth()+1
    var d = dt.getDate()
    
    if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd'){
      return `${y}-${m}-${d}`
    } else {
      var hh = dt.getHours();
      var min = dt.getMinutes();
      var ss = dt.getSeconds();
      return `${y}-${m}-${d} ${hh}:${min}:${ss}`
    }
  });
  var vm = new Vue({
    el:'#app',
    data:{
      dt:new Date(),
    },
  });
  var vm2 = new Vue({
    el:'#app2',
    data:{
      dt:new Date(),
    },
    //定义私有过滤器
    filters:{
      dateFormat:function(dateStr,pattern){
        var dt = new Date(dateStr)
        var y = dt.getFullYear()
        var m = dt.getMonth()+1
        var d = dt.getDate()
        
        if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd'){
          return `${y}-${m}-${d}`
        } else {
          var hh = dt.getHours();
          var min = dt.getMinutes();
          var ss = dt.getSeconds();
          return `${y}-${m}-${d} ${hh}:${min}:${ss}~~~`
        }
      }
    }
  })
</script>
</html>