vue中过滤器filter怎么用

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要为大家展示了“vue中过滤器filter怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中过滤器filter怎么用”这篇文章吧。

示例

vue中过滤器filter怎么用

<!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>
</head>
<body>
  <div id="app">
    <!-- {{}}中的|表示过滤器管道符,过滤器后面的为过滤函数 -->
    <p>{{msg | msgFormat('疯狂+1')}}</p>
    <!-- 多个过滤函数进行调用 -->
    <p>{{msg | msgFormat('疯狂+1') | test}}</p>
    <h3>{{time | dateFormat}}</h3>
  </div>
</body>
<script class="lazy" data-src="./js/vue.js"></script>
<script>
  //过滤器的定义语法
  //Vue.filter('过滤器的名称',function () { })
  //过滤器中的function,第一个参数data，已经被规定死，永远都是过滤器管道符前面传递过来的数据
  // 从第二个参数开始就是传值
  // Vue.filter('过滤器名称',function(data){
  //   return data+123
  // });
  //定义一个Vue全局的过滤器，名字：msgFormat
  Vue.filter('msgFormat',function(msg,param) {
    //字符出中的replace方法，第一个参数，出了写一个字符串之外，还可以定义一个正则
    // return msg.replace('单纯','邪恶');
    // return msg.replace(/单纯/g,'邪恶')
    return msg.replace(/单纯/g,param)
  })
  Vue.filter('test',function(msg) {
    return msg+'love'
  })
  //如何定义一个私有过滤（局部）
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '我也是一个单纯的少年，单纯到自己很可爱，我也会喜欢你',
      time: new Date(),
    },
    //定义私有过滤器，过滤器有两个条件[过滤器名称 和 处理函数 ]
    filters: {
      
      //param = '';es6的初始化值
      dateFormat: function(time,param = ''){
        var dt = new Date(time);
        // yyyy-mm-dd
        var y = dt.getFullYear();
        // var m = dt.getMonth()+1;
        var m = (dt.getMonth()+1).toString().padStart(2,'0');
        var d = dt.getDate();
        // return y+'-'+m+'-'+d;
        //模板字符串
        // return `${y}-${m}-${d}`;
        if(param.toLowerCase() === 'yyyy-mm-dd'){
          return `${y}-${m}-${d}`;
        }else{
          var hh = dt.getHours();
          var mm = (dt.getMinutes()).toString().padStart(2,'0');
          var ss = dt.getSeconds();
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
      }
    },
    methods: { }
  })
</script>
</html>
[点击并拖拽以移动]

vue中过滤器filter怎么用