1.過濾器的寫法
{{ message | Filter}}
2.Vue1自帶的過濾器
capitalize 首字母大寫
uppercase 全部大寫
uppercase 全部小寫
currency 輸出金錢以及小數(shù)點(diǎn)
參數(shù):
第一個(gè)參數(shù) {String} [貨幣符號(hào)] - 默認(rèn)值: '$'
第二個(gè)參數(shù) {Number} [小數(shù)位] - 默認(rèn)值: 2
debounce 需在@里面使用 包裝處理器，讓它延遲執(zhí)行 x ms
limitBy 限制:需在v-for(即數(shù)組)里面使用
參數(shù):
第一個(gè)參數(shù):{Number} 取得數(shù)量
第二個(gè)參數(shù):{Number} 偏移量
filterBy 需在v-for(即數(shù)組)里面使用
三個(gè)參數(shù):
第一個(gè)參數(shù): {String | Function} 需要搜索的字符串
第二個(gè)參數(shù): in (可選,指定搜尋位置)
第三個(gè)參數(shù): {String} (可選,數(shù)組格式)
orderBy 需在v-for(即數(shù)組)里面使用
三個(gè)參數(shù):
第一個(gè)參數(shù): {String | Array<String> | Function} 需要搜索的字符串
第二個(gè)參數(shù): {String} 可選參數(shù) order 決定結(jié)果升序（order >= 0）或降序（order < 0）,默認(rèn)是升序
3.自定義過濾器
注意事項(xiàng):
(1)全局方法 Vue.filter() 注冊(cè)一個(gè)自定義過濾器,必須放在Vue實(shí)例化前面
(2) 過濾器函數(shù)始終以表達(dá)式的值作為第一個(gè)參數(shù)试吁。帶引號(hào)的參數(shù)視為字符串拣技，而不帶引號(hào)的參數(shù)按表達(dá)式計(jì)算
(3)可以設(shè)置兩個(gè)過濾器參數(shù),前提是這兩個(gè)過濾器處理的不沖突
(4)用戶從input輸入的數(shù)據(jù)在回傳到model之前也可以先處理
例（全局）：
<body>
<div class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--過濾器函數(shù)始終以表達(dá)式的值作為第一個(gè)參數(shù)。帶引號(hào)的參數(shù)視為字符串烂完，而不帶引號(hào)的參數(shù)按表達(dá)式計(jì)算赂蕴。-->
<p>{{message | sum | currency }}</p> <!--添加兩個(gè)過濾器,注意不要沖突-->
<input type="text" v-model="message | change"> <!--用戶從input輸入的數(shù)據(jù)在回傳到model之前也可以先處理-->
</div>
<script type="text/javascript">
// -----------------------------------------華麗分割線(從model->view)---------------------------------------
Vue.filter("sum", function(value) { //全局方法 Vue.filter() 注冊(cè)一個(gè)自定義過濾器,必須放在Vue實(shí)例化前面
return value + 4;
});
Vue.filter('cal', function (value, begin, xing) { //全局方法 Vue.filter() 注冊(cè)一個(gè)自定義過濾器,必須放在Vue實(shí)例化前面
return value + begin + xing;
});
// -----------------------------------------華麗分割線(從view->model)---------------------------------------
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在寫回?cái)?shù)據(jù)之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});
var myVue = new Vue({
el: ".test",
data: {
message:12
}
});
</script>
</body>
例（局部）：
<body>
<div class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--過濾器函數(shù)始終以表達(dá)式的值作為第一個(gè)參數(shù)设哗。帶引號(hào)的參數(shù)視為字符串唱捣，而不帶引號(hào)的參數(shù)按表達(dá)式計(jì)算。-->
<p>{{message | sum | currency }}</p> <!--添加兩個(gè)過濾器,注意不要沖突-->
<input type="text" v-model="message | change"> <!--用戶從input輸入的數(shù)據(jù)在回傳到model之前也可以先處理-->
</div>
<script type="text/javascript">
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在寫回?cái)?shù)據(jù)之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});
var myVue = new Vue({
el: ".test",
data: {
message:12
},
filters: {
sum: function (value) {
return value + 4;
},
cal: function (value, begin, xing) {
return value + begin + xing;
}
}
});
</script>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
