欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue filters過(guò)濾器的使用方法

 更新時(shí)間:2017年07月14日 11:10:26   作者:qq_18837459  
這篇文章主要為大家詳細(xì)介紹了Vue filters過(guò)濾器的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue filters過(guò)濾器使用,供大家參考,具體內(nèi)容如下

實(shí)例

先來(lái)看看一段代碼理解下

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
      }

    }
  }
});


控制臺(tái)日志

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

先來(lái)看看兩個(gè)過(guò)濾器的入?yún)?

第一個(gè)過(guò)濾器filters2的入?yún)⑹?99,是Vue實(shí)例中綁定的message
第二個(gè)過(guò)濾器filters3的入?yún)⑹?91、(第一個(gè)過(guò)濾器返回的值)false(第二個(gè)過(guò)濾器的第一個(gè)入?yún)ⅲ?.8(第二個(gè)過(guò)濾器的第二個(gè)入?yún)ⅲ?/p>

1、Vue實(shí)例中的message是199
2、第一個(gè)過(guò)濾器,大于100的數(shù)減8(理解為滿(mǎn)100減8),199-8=191傳給第二個(gè)過(guò)濾器作為第一個(gè)參數(shù)
3、第二個(gè)過(guò)濾器,有兩個(gè)入?yún)?,第一個(gè)是boolean值(理解為是否打折),第二個(gè)是0.8(折扣)。

當(dāng)?shù)谝粋€(gè)入?yún)閠rue的時(shí)候(表示需要打折),191*0.8=152.8(0.8為折扣)

總結(jié)

通過(guò)過(guò)濾器filters我們可以根據(jù)業(yè)務(wù)場(chǎng)景對(duì)數(shù)據(jù)進(jìn)行處理。

如上一個(gè)例子,可以理解成如下業(yè)務(wù)場(chǎng)景。

1、當(dāng)商品價(jià)格大于100時(shí),可以減8塊錢(qián)
2、當(dāng)?shù)赇佔(zhàn)龌顒?dòng)的時(shí)候可以進(jìn)行打折促銷(xiāo)(0.8)
3、最后展示的數(shù)值就是用戶(hù)需要支付的金額

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 如何利用vite快速搭建vue3項(xiàng)目

    如何利用vite快速搭建vue3項(xiàng)目

    這篇文章主要介紹了如何利用vite快速搭建vue3項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架)

    使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架)

    這篇文章主要介紹了使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,
    2023-10-10
  • Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn)

    Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn)

    Vue3中我們經(jīng)常需要使用defineProps來(lái)定義組件的屬性,本文主要介紹了Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2024-07-07
  • Vue打包路徑配置過(guò)程

    Vue打包路徑配置過(guò)程

    這篇文章主要介紹了Vue打包路徑配置過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue-cli 3 全局過(guò)濾器的實(shí)例代碼詳解

    vue-cli 3 全局過(guò)濾器的實(shí)例代碼詳解

    這篇文章主要介紹了vue-cli 3 全局過(guò)濾器的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-06-06
  • Vue項(xiàng)目打包問(wèn)題詳解(生產(chǎn)環(huán)境樣式失效)

    Vue項(xiàng)目打包問(wèn)題詳解(生產(chǎn)環(huán)境樣式失效)

    在Vue開(kāi)發(fā)過(guò)程中,項(xiàng)目的打包是一個(gè)非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問(wèn)題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接

    Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接

    這篇文章主要介紹了Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接,Vue跨端渲染是一種基于Vue框架的跨平臺(tái)開(kāi)發(fā)技術(shù),能夠?qū)崿F(xiàn)Web、iOS和Android三端的無(wú)縫銜接,提高開(kāi)發(fā)效率和用戶(hù)體驗(yàn)
    2023-05-05
  • Nuxt.js踩坑總結(jié)分享

    Nuxt.js踩坑總結(jié)分享

    本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • Vue+OpenLayer實(shí)現(xiàn)測(cè)距功能

    Vue+OpenLayer實(shí)現(xiàn)測(cè)距功能

    OpenLayers?是一個(gè)專(zhuān)為Web?GIS?客戶(hù)端開(kāi)發(fā)提供的JavaScript?類(lèi)庫(kù)包,用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問(wèn)。本文將通過(guò)Vue和OpenLayer實(shí)現(xiàn)測(cè)距功能?,需要的可以參考一下
    2022-04-04
  • 為什么推薦使用JSX開(kāi)發(fā)Vue3

    為什么推薦使用JSX開(kāi)發(fā)Vue3

    這篇文章主要介紹了為什么推薦使用JSX開(kāi)發(fā)Vue3,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-12-12

最新評(píng)論