Vue2.x之过滤器filter函数

目录直通车定义过滤器使用过滤器引入cdn怎么使用？实例代码我还是先解释，后面贴出实例代码，便于大家学习。filter是Vue的一个函数，使用之前需要先定义。定义过滤器//filterName是自己给过滤器命的名Vue.filter('filterName', function (value) {// 返回处理后的值})使用过滤器<...

MrDJun

5227人浏览 · 2018-12-16 18:03:54

MrDJun · 2018-12-16 18:03:54 发布

目录直通车

我还是先解释，后面贴出实例代码，便于大家学习。

filter是Vue的一个函数，使用之前需要先定义。

定义过滤器

//filterName是自己给过滤器命的名
Vue.filter('filterName', function (value) {
    // 返回处理后的值
})

使用过滤器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

在做项目的过程中，处理格式化日期的filter比较多。这里给大家推荐一个开源项目，这个项目专门用于格式化日期的，目前star已经达到了39.5k。下面和大家分享一下如何使用http://momentjs.cn。

引入cdn

所以先打开bootcdn.cn找到moment.js

直接翻到最后，引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>

怎么使用？

打开momentjs.cn看官方文档！建议避免去看别人的博客，容易被误导！

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
</head>
<body>

<!--需求: 对当前时间进行指定格式显示-->
<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{time}}</p>
  <p>最完整的: {{time | dateString}}</p>
  <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/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: {
      time: new Date()
    },
    mounted () {
      setInterval(() => {
        this.time = new Date()
      }, 1000)
    }
  })
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^