Vue filters過濾器的使用方法
本文實(shí)例為大家分享了Vue filters過濾器使用，供大家參考，具體內(nèi)容如下
實(shí)例
先來看看一段代碼理解下
html
<div id="app">
{{message | filters2| filters3(true,priceCount)}}
</div>
js
var app = new Vue({
el: "#app",
data: {
message: 199,
priceCount:.8
},
filters:{
filters2:function (arg) {
console.log("arg:"+arg)
if(arg>100){
return arg-8;
}else {
return arg;
}
},
filters3:function (arg_1,arg_2,arg_3) {
var result;
console.log("arg_1:"+arg_1)
console.log("arg_2:"+arg_2)
console.log("arg_3:"+arg_3)
if(arg_2){
result = arg_1*arg_3;
console.log("result"+result);
return result;
}else{
result =arg_1;
console.log("result"+result);
return result
}
}
}
});
控制臺日志
helloVue.js:17 arg:199
helloVue.js:26 arg_1:191
helloVue.js:27 arg_2:true
helloVue.js:28 arg_3:0.8
helloVue.js:35 result152.8
先來看看兩個過濾器的入?yún)?
第一個過濾器filters2的入?yún)⑹?99，是Vue實(shí)例中綁定的message
第二個過濾器filters3的入?yún)⑹?91、（第一個過濾器返回的值）false（第二個過濾器的第一個入?yún)ⅲ?.8（第二個過濾器的第二個入?yún)ⅲ?/p>
1、Vue實(shí)例中的message是199
2、第一個過濾器，大于100的數(shù)減8（理解為滿100減8），199-8=191傳給第二個過濾器作為第一個參數(shù)
3、第二個過濾器，有兩個入?yún)?，第一個是boolean值（理解為是否打折），第二個是0.8（折扣）。
當(dāng)?shù)谝粋€入?yún)閠rue的時(shí)候(表示需要打折)，191*0.8=152.8（0.8為折扣）
總結(jié)
通過過濾器filters我們可以根據(jù)業(yè)務(wù)場景對數(shù)據(jù)進(jìn)行處理。
如上一個例子，可以理解成如下業(yè)務(wù)場景。
1、當(dāng)商品價(jià)格大于100時(shí)，可以減8塊錢
2、當(dāng)?shù)赇佔(zhàn)龌顒拥臅r(shí)候可以進(jìn)行打折促銷（0.8）
3、最后展示的數(shù)值就是用戶需要支付的金額
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何利用vite快速搭建vue3項(xiàng)目問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架)
這篇文章主要介紹了使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架),具有很好的參考價(jià)值,希望對大家有所幫助,2023-10-10
Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn)
Vue3中我們經(jīng)常需要使用defineProps來定義組件的屬性,本文主要介紹了Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
這篇文章主要介紹了Vue打包路徑配置過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue-cli 3 全局過濾器的實(shí)例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue項(xiàng)目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項(xiàng)目的打包是一個非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue跨端渲染實(shí)現(xiàn)多端無縫銜接，Vue跨端渲染是一種基于Vue框架的跨平臺開發(fā)技術(shù)，能夠?qū)崿F(xiàn)Web、iOS和Android三端的無縫銜接，提高開發(fā)效率和用戶體驗(yàn)2023-05-05
本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue+OpenLayer實(shí)現(xiàn)測距功能
OpenLayers?是一個專為Web?GIS?客戶端開發(fā)提供的JavaScript?類庫包，用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問。本文將通過Vue和OpenLayer實(shí)現(xiàn)測距功能?，需要的可以參考一下2022-04-04
這篇文章主要介紹了為什么推薦使用JSX開發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12