顏色濾鏡，在好多網頁都這樣使用，濾掉彩色，顯示黑白，這在一些關鍵的日子中都這樣使用。

1、依然回到訂單確認頁面

看到支付的顏色了嘛？

		<view class="payType"><view class="box" :class="item.value==payDefValue ? 'active' : ''" v-for="item,index in payType":key="index" @click="clickBtn(item.value)"><u-icon :name="item.icon" size="26" class="icon":color="item.value==payDefValue ? item.color :''"></u-icon><text class="font">{{item.name}}</text><!-- <u-icon name="weixin-fill" size="26" class="font"></u-icon><text class="font">微信</text>--></view></view>

很明顯這里的顏色是 color 來決定

讀取到什么支付就是什么顏色，支付寶? 藍色?? ，微信 綠色

這里的color 控制的是圖形的顏色，哪還有邊框和字體？

2、整體顏色變化

通過active?? 這個class 在樣式中來控制

2.1 如果讀取到系統是微信? 就是 微信支付 為默認， 那么 圖像就是綠色的微信支付，

然后? 字體和邊框 就會根據class 來決定 誰是active

class="item.value==payDefValue ? 'active' : ''"

然后樣式中也會識別到底是哪一個active被調用。

<style lang="scss">page {background-color: $page-bg-color;   //頁面背景色}.paypage {padding: 30rpx;.goodsList {margin-top: 30rpx;}.payType {@include flex-box();.box {//box 就兩個支付方式    width: 45%; //一個支付方式站49 剩下中間的2的空格height: 75rpx;background: #fff;border-radius: 10rpx;@include flex-box-set();// filter: grayscale(100%);   //濾鏡效果  100%把顏色全濾掉      我們已經用了 :color="item.value==payDefValue ? item.color :''"  就不用濾鏡了border: 1rpx solid #fff;.font {padding-left: 10rpx;}}//可以這樣 當用text時，若用view + style  就不用下面的方式.box:first-child.active {border-color: #1578ff; //邊框顏色color: #1578ff;}.box:last-child.active {border-color: #04c15f;color: #04c15f;}}.payTabbar {position: fixed;width: 100%;bottom: 0;left: 0}}
</style>

2.2 如果不是默認，用戶想要選擇

在剛剛的頁面view 中，有一個按鈕?@click="clickBtn(item.value)

方法中，就實現了 點擊按鈕? 就選擇該支付，

那么相應改變了支付方式

		methods: {//切換支付方式clickBtn(type) {this.payDefValue = type}}

，支付方式改變，就顯示哪一個圖像選中，邊框和字體的class 就active

顏色都隨之變化。

3、filter 顏色濾鏡

講到上面，其實顏色都可以實現變化了，但是還有一個主要的工具 filter

這里還有一個全局filter 顏色濾鏡?

?filter: grayscale(100%);???

//濾鏡效果? 100%把顏色全濾掉????? 我們已經用了 :color="item.value==payDefValue ? item.color :''"? 就不用濾鏡了

通過他就可以全局改變了顏色，變成黑白????filter: grayscale(100%);???

改回原來的顏色：?filter: grayscale(0%);???

如果你要使用這個也可以實現：我們上面顏色的變化。

<style lang="scss">page {background-color: $page-bg-color;   //頁面背景色}.paypage {padding: 30rpx;.goodsList {margin-top: 30rpx;}.payType {@include flex-box();.box {//box 就兩個支付方式    width: 45%; //一個支付方式站49 剩下中間的2的空格height: 75rpx;background: #fff;border-radius: 10rpx;@include flex-box-set();//filter: grayscale(100%);   //濾鏡效果  100%把顏色全濾掉      我們已經用了 :color="item.value==payDefValue ? item.color :''"  就不用濾鏡了border: 1rpx solid #fff;.font {padding-left: 10rpx;}}//可以這樣 當用text時，若用view + style  就不用下面的方式.box:first-child.active {border-color: #1578ff; //邊框顏色color: #1578ff;//filter: grayscale(0%)}.box:last-child.active {border-color: #04c15f;color: #04c15f;//filter: grayscale(0%)}}.payTabbar {position: fixed;width: 100%;bottom: 0;left: 0}}
</style>

上面的樣式里，也就寫了 filter 但是我用1-2 的步驟完成了顏色變化的功能，我就注釋。