14_过滤器

最新推荐文章于 2022-08-16 22:59:13 发布

xixihaha_coder

最新推荐文章于 2022-08-16 22:59:13 发布

阅读量61

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/123175865

版权

Vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

14_过滤器

<!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 type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
  </head>
<!-- 
    语法:
        1.注册过滤器:Vue.filter(name, callback)或new Vue{filters:{}
        2,使用过滤器:{{ xxx|过滤器名}}或v-bind:属性= “xxx|过滤器名"
备注:
    1.过滤器也可以接收额外参数、多个过滤器也可以串联
    2.并没有改变原本的数据,是产生新的对应的数据

 -->
  <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>
        
      
    </div>

    <div id=root2>
        <!-- 用不了root里面的mySlice -->
        <h2>{{msg | mySlice}}</h2>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;
    //全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

    new Vue({
      el: "#root",
      data: {
        time: 1621561377603,
      },
      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);
        },
        mySlice(value) {
          return value.slice(0,4)
        },
      },
    });

    new Vue({
      el: "#root2",
      data: {
          msg: 'hello'
      }
    });
  </script>
</html>

xixihaha_coder

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14_过滤器

14_过滤器<!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" /> &
复制链接

扫一扫