vue-过滤器

news2024/12/28 2:54:20

vue允许定义过滤器，对于一些文本常见格式化。过滤器可以用在两个地方

-（1）v-bind 表达式

-（2）{{}}插值表达式

使用：使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

注册：Vue.filter(name,callback) 或 new Vue{filters:{}}

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>
<body>
  <!-- 准备好一个容器-->
<div id="root">
  <h2>显示格式化后的时间</h2>
  <!-- 计算属性实现 -->
  <h3>现在是：{{ fmtTime }}</h3>
  <!-- methods实现 -->
  <h3>现在是：{{ getFmtTime() }}</h3>
  <!-- 过滤器实现 -->
  <h3>现在是：{{time | timeFormater}}</h3>
  <!-- 过滤器实现（传参） -->
  <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
  <h3 :x="msg | mySlice">尚硅谷</h3>
</div>

<script type="text/javascript">

  //全局过滤器
  Vue.filter('mySlice',function(value){
      return value.slice(0,4)
  })

  new Vue({
      el:'#root',
      data:{
          time:Date.now(), //时间戳
          msg:'你好，尚硅谷'
      },
      // 计算属性
      computed: {
          fmtTime(){
              return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
          }
      },
      // 方法
      methods: {
          getFmtTime(){
              return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
          }
      },
      //局部过滤器
      filters:{
          timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
              // console.log('@',value)
              return dayjs(value).format(str)
          }
      }
  })
</script>
</body>
</html>