master

分支 (2)

管理

管理

master

character

vuequanjiatongzhivuejichu
/
2020-8-31-过滤器-filter.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">{{ date | formatDate }}</div>
  </body>
  <script>
    //在月份、日期、小时  小于10前面补0
    var padDate = function (value) {
      return value < 10 ? "0" + value : value
    }
    var app = new Vue({
      el: "#app",
      data: {
        date: new Date()
      },
      filters: {
        //这里的value就是需要过滤的数据
        formatDate: function (value) {
          var date = new Date(value)
          var year = date.getFullYear()
          var month = padDate(date.getMonth() + 1)
          var day = padDate(date.getDate())
          var hours = padDate(date.getHours())
          var minutes = padDate(date.getMinutes())
          var seconds = padDate(date.getSeconds())
          //将整理好的数据返回出去
          return (
            year +
            "-" +
            month +
            "-" +
            day +
            "-" +
            hours +
            ":" +
            minutes +
            ":" +
            seconds
          )
        }
      },
      mounted() {
        //声明一个变量指向Vue实例this，保证作用域一致
        var _this = this
        this.timer = setInterval(function () {
          _this.date = new Date()
        }, 1000)
      },
      beforeDestroy() {
        //在组件销毁之前，清除定时器
        if (this.timer) {
          clearInterval(this.timer)
        }
      }
    })
  </script>
  <!-- 过滤器 filters

    Vue.js在插值表达式{{}} 中添加一个管道符号"(|)"对数据进行过滤，
    经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。
    过滤规则是自己定义的，通过给Vue实例添加选项filter来设置。
--></html>