Vue filters過濾器的使用方法
本文實例為大家分享了Vue filters過濾器使用,供大家參考,具體內容如下
實例
先來看看一段代碼理解下
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
先來看看兩個過濾器的入參
第一個過濾器filters2的入參是199,是Vue實例中綁定的message
第二個過濾器filters3的入參是191、(第一個過濾器返回的值)false(第二個過濾器的第一個入參)、0.8(第二個過濾器的第二個入參)
1、Vue實例中的message是199
2、第一個過濾器,大于100的數(shù)減8(理解為滿100減8),199-8=191傳給第二個過濾器作為第一個參數(shù)
3、第二個過濾器,有兩個入參,第一個是boolean值(理解為是否打折),第二個是0.8(折扣)。
當?shù)谝粋€入參為true的時候(表示需要打折),191*0.8=152.8(0.8為折扣)
總結
通過過濾器filters我們可以根據(jù)業(yè)務場景對數(shù)據(jù)進行處理。
如上一個例子,可以理解成如下業(yè)務場景。
1、當商品價格大于100時,可以減8塊錢
2、當?shù)赇佔龌顒拥臅r候可以進行打折促銷(0.8)
3、最后展示的數(shù)值就是用戶需要支付的金額
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
使用兩種方式調用本地json文件(基于Vue-cli3腳手架)
這篇文章主要介紹了使用兩種方式調用本地json文件(基于Vue-cli3腳手架),具有很好的參考價值,希望對大家有所幫助,2023-10-10Vue3中defineProps設置默認值的方法實現(xiàn)
Vue3中我們經常需要使用defineProps來定義組件的屬性,本文主要介紹了Vue3中defineProps設置默認值的方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07