溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了哪里使用Vue串聯過濾器，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
平時開發中，需要用到過濾器的地方有很多，比如單位轉換、數字打點、文本格式化等，比如：
Vue.filter('toThousandFilter', function (value) {
if (!value) return ''
value = value.toString()
return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')
})實現效果：
30000 => 30,000
當然這只是常規用法，沒什么好說的。下面來說一個我在開發中遇到的一個需要用到串聯過濾器的使用場景。
假設需要獲取一個訂單列表，其中的每一項的 status 字段用來表示訂單狀態：
{
id: '',
order_num: '123456789',
goodList: [ ... ],
address: { ... },
status: 1 // 1 待付款 2 待發貨 3 待收貨
}那我們拿到這個數據在，v-for 的時候，肯定會這樣做：
<template>
<!-- ... -->
<span class="order_status">{{ orderItem.status | getOrderStatus }}</span>
<!-- ... -->
</template>
<script>
export default {
// ...
filters: {
getOrderStatus(status) {
switch (status.toString()) {
case '1':
return '待付款';
case '1':
return '待發貨';
case '1':
return '待收貨';
default:
return '';
}
}
}
// ...
}
</script>
<style scoped type="scss">
// ...
.order_status {
font-size: 14px;
}
// ...
</style>這樣，表示狀態的 1， 2， 3 就變成了 待付款，待發貨，待收貨。這沒有什么問題。但是，需求來了，當訂單未付款時，表示狀態的文字應該為紅色。就是當狀態為 待付款 時，文字要為紅色！這個問題曾經困擾了有一段時間，用了各種辦法，雖然也是實現了需求，但終歸不太優雅。直到最近在翻看 vue 文檔，才想起來有串聯過濾器的用法，可以完美解決這個需求，上碼：
<template>
<!-- ... -->
<span class="order_status" :class="orderItem.status | getOrderStatus | getOrderStatusClass">{{ orderItem.status | getOrderStatus }}</span>
<!-- ... -->
</template>
<script>
export default {
// ...
filters: {
getOrderStatus(status) {
switch (status.toString()) {
case '1':
return '待付款';
case '1':
return '待發貨';
case '1':
return '待收貨';
default:
return '';
}
},
getOrderStatusClass(status) {
if (status === '待付款') {
return 'not-pay'
}
return ''
}
}
// ...
}
</script>
<style scoped type="scss">
// ...
.order_status {
font-size: 14px;
&.not-pay {
color: red;
}
}
// ...
</style>就這么簡單。
關于過濾器，這里還有幾點要注意的：
看完上述內容，是不是對哪里使用Vue串聯過濾器有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
