vue 过滤器用法

Posted 2021-01-14 miny-simp

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

1、在一个组件的选项中定义本地的过滤器：

  filters: {
    word36: function(value) {
      var result = value.substr(0,36) + "...";
      return result;
    }
  },

2、在创建 Vue 实例之前全局定义过滤器：

/** 时间戳转换 */
Vue.filter(‘dateFilter‘, function (value) {
  var d = new Date(input);
  var year = d.getFullYear();
  var month =
    d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
  var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
  var hour = d.getHours();
  var minutes =
    d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
  var seconds =
    d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
  return (
    year +
    "-" +
    month +
    "-" +
    day +
    " " +
    hour +
    ":" +
    minutes +
    ":" +
    seconds
  );
})
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: {
    App
  },
  template: ‘<App/>‘
})