vue過濾器的使用

時間 2019-11-06

標籤 vue 過濾器使用简体版

原文原文鏈接

vue過濾器

過濾器實質不改變原始數據，只是對數據進行加工處理後返回過濾後的數據再進行調用處理，這點要切記

過濾器的定義和使用

定義

全局定義和局部定義兩種方式html

// 全局註冊
Vue.filter('toRMB', function (value) {
  return `￥${value}`
})

new Vue({
  el: '#app',
  data: {
    money: 826.26,
  },

  // 局部註冊
  filters: {
    toFixed: function(money) {
      return money.toFixed(1)
    },
  },
)}

使用

在雙花括號中使用管道符(pipeline) |隔開，或者v-bind 表達式(v2.1.0以上支持)vue

<h2>過濾器的使用-添加前綴</h2>
<p>{{352.11 | toRMB}}</p>
<p>{{657 | toRMB}}</p>
<p>{{657.22 | toFixed }}</p>
<p>{{money | toFixed }}</p>

還能夠鏈式使用，注意前後的順序，以下面的先添加￥符號再進行小數位變換將會出錯，所以要注意前後順序數組

<p>{{ money | toFixed | toRMB }}</p>

過濾器函數的多層參數

過濾器函數是指接收的參數不止value這一個，還能夠添加length和suffix參數app

<h2>多重參數</h2>
<p>{{text}}</p>
<p>{{text | readMore(20,'...')}}</p>

new Vue({
  el: '#app',
  data: {
    text: 'hello I love u, will u love me ?',
  },
  filters: {
    readMore: function (value,length,suffix) {
      console.log(arguments);
      return value.substr(0,length) + suffix;
    },
  }
})

完整DEMO請戳ide