vue過濾器
過濾器本質不轉變原始數據，只是對數據舉行加工處置懲罰后返回過濾后的數據再舉行挪用處置懲罰，這點要牢記
過濾器的定義和運用
定義
全局定義和部分定義兩種體式格局
// 全局註冊
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以上支撐)
<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參數
<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;
},
}
})其他一些例子
收集了一些罕見的運用場景，多加聯絡
