过滤器

功能：对需要显示的数据进行特定格式化后再渲染至视图进行显示（适用于一些简单逻辑的处理）
语法
1. 注册过滤器：Vue.filter("mySlice", callback) 或 new Vue{filters:{ }}
2. 使用过滤器：{ { xxx | 过滤器名 } } 或 v-bind:属性=" xxx | 过滤器名"
注：
1. 过滤器可接收额外参数，可进行多个过滤器串联
2. 过滤器不改变原本数据，只生成新的对应数据

<div id="app">
      <h2>显示格式化后是时间</h2>
      <!-- 计算属性实现 -->
      <h3>当前时间为：{{fmtTime}}</h3>
      <!-- methods实现 -->
      <h3>当前时间为：{{getFmtTime()}}</h3>
      <!-- 过滤器实现 -->
      <h3>当前时间为：{{time | timeFprmater}}</h3>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
    <script>
      Vue.config.productionTip = false;
      //   全局过滤器
      Vue.filter("mySlice", function (value) {
        return value.slice(0, 5);
      });
      var vm = new Vue({
        el: "#app",
        data: {
          time: Date.now(),
        },
        computed: {
          fmtTime() {
            return dayjs().format("YYYY-MM-DD HH-mm-ss");
          },
        },
        methods: {
          getFmtTime() {
            return dayjs().format("YYYY-MM-DD HH-mm-ss");
          },
        },
        // 局部过滤器
        filters: {
          timeFprmater(value, str = "YYYY-MM-DD HH-mm-ss") {
            return dayjs(value).format(str);
          },
        },
      });
    </script>

Vue 过滤器（Day15）

过滤器