vue filter过滤器用法

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/>'
})

 3、全局定义过滤器：

(1) 新建 filters.js 文件

(2) 在 main.js 中引入

import filters from './http/filters'
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

 

(3) filters.js 中编写方法

 

exports.applyDictionary = (val) => {
  let stateList = [
    {'code': '2', 'text': '外勤'},
    {'code': '3', 'text': '出差'},
    {'code': '4', 'text': '请假'},
    {'code': '5', 'text': '加班'},
    {'code': '6', 'text': '执勤'},
    {'code': '7', 'text': '补卡'}
  ]
  for(let i in stateList) {
    if(val == stateList[i].code) {
      return stateList[i].text
    }
  }
}

(4) 过滤函数传递多个参数、多个过滤函数

 

<template>
  <div class="main-box">
    <h4 class="mm0 pt10">过滤器使用</h4>
    <!--这里把其他参数括号括起来，否则会报错-->
    <p>{{txt | dictionary('before','after') }}</p>
    <!-- 多个全局过滤器 -->
    <p>{{txt | filter1 | filter2}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      txt: '过滤器demo123'
    }
  },
}
</script>

 

// 过滤器传参
exports.dictionary = (val, first, second) => {
  return first + val + second
}
exports.filter1 = (val) => {
  return val + '第一次处理数据'
}
exports.filter2 = (val) => {
  return val + '第二次处理数据'
}