vue过滤器

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

X W F

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

阅读量102

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_46399258/article/details/109763734

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

理解过滤器
功能：对要显示的数据进行特定格式化后在显示
注意：并没有改变原本的数据，可是产生新的对应的数据
编码
2.1 定义过滤器
vue.filter(filterName,function(value,[arg1,arg2]){
进行一定的数据处理
return newValue
})
2.2 使用过滤器

{{myDate | filterName}}

{{myDate | filterName(arg))}}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 需求：对当前时间进行指定格式显示 -->
    <div id="test">
      <h2>显示格式化的日期时间</h2>
      <p>{{date}}</p>
      <p>完整版：{{date | dateString}}</p>
      <p>年月日：{{date | dateString("YYYY-MM-DD")}}</p>
      <p>时分秒：{{date | dateString("HH:mm:ss")}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
    <script>
      /* 自定义过滤器 */
      Vue.filter("dateString", function (
        value,
        format = "YYYY-MM-DD HH:mm:ss"
      ) {
        return moment(value).format(format);
      });
      new Vue({
        el: "#test",
        data: {
          data: new Date(),
        },
      });
    </script>
  </body>
</html>