1.過濾器的寫法
{{ message | Filter}}
2.Vue1自帶的過濾器
capitalize 首字母大寫
uppercase 全部大寫
uppercase 全部小寫
currency 輸出金錢以及小數(shù)點
參數(shù):
第一個參數(shù) {String} [貨幣符號] - 默認值: '$'
第二個參數(shù) {Number} [小數(shù)位] - 默認值: 2
debounce 需在@里面使用 包裝處理器，讓它延遲執(zhí)行 x ms
limitBy 限制:需在v-for(即數(shù)組)里面使用
參數(shù):
第一個參數(shù):{Number} 取得數(shù)量
第二個參數(shù):{Number} 偏移量
filterBy 需在v-for(即數(shù)組)里面使用
三個參數(shù):
第一個參數(shù): {String | Function} 需要搜索的字符串
第二個參數(shù): in (可選,指定搜尋位置)
第三個參數(shù): {String} (可選,數(shù)組格式)
orderBy 需在v-for(即數(shù)組)里面使用
三個參數(shù):
第一個參數(shù): {String | Array<String> | Function} 需要搜索的字符串
第二個參數(shù): {String} 可選參數(shù) order 決定結(jié)果升序（order >= 0）或降序（order < 0）,默認是升序
3.自定義過濾器
注意事項:
(1)全局方法 Vue.filter() 注冊一個自定義過濾器,必須放在Vue實例化前面
(2) 過濾器函數(shù)始終以表達式的值作為第一個參數(shù)。帶引號的參數(shù)視為字符串，而不帶引號的參數(shù)按表達式計算
(3)可以設置兩個過濾器參數(shù),前提是這兩個過濾器處理的不沖突
(4)用戶從input輸入的數(shù)據(jù)在回傳到model之前也可以先處理
例（全局）：
<body>
<div class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--過濾器函數(shù)始終以表達式的值作為第一個參數(shù)。帶引號的參數(shù)視為字符串，而不帶引號的參數(shù)按表達式計算。-->
<p>{{message | sum | currency }}</p> <!--添加兩個過濾器,注意不要沖突-->
<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() 注冊一個自定義過濾器,必須放在Vue實例化前面
return value + 4;
});
Vue.filter('cal', function (value, begin, xing) { //全局方法 Vue.filter() 注冊一個自定義過濾器,必須放在Vue實例化前面
return value + begin + xing;
});
// -----------------------------------------華麗分割線(從view->model)---------------------------------------
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在寫回數(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ù)始終以表達式的值作為第一個參數(shù)。帶引號的參數(shù)視為字符串，而不帶引號的參數(shù)按表達式計算。-->
<p>{{message | sum | currency }}</p> <!--添加兩個過濾器,注意不要沖突-->
<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 在寫回數(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)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
