天天看點

uni-app——三目運算、動态綁定class 和 style

<view class="status">
	<text class="agreeColor" v-if="item.status==1">已同意</text>
	<text class="refuseColor" v-if="item.status==2">已拒絕</text>
</view>
<style>
	.agreeColor{
		color: #1FAA39;
	}
	.refuseColor{
		color: #EC6C1F;
	}
</style>
           
<view class="xf_method" :class="item.pay_type =='we_chat_pay' ? 'we_chat_pay' : 'balance'">
<image src="/static/wechat_pay.png" mode="aspectFill" v-show="item.pay_type =='we_chat_pay'"></image>
<image :src="/static/balance_pay.png" mode="aspectFill" v-show="item.pay_type =='balance'"></image>
		{{item.pay_type =='we_chat_pay'?'微信支付':'餘額支付'}}
</view>
<style>
	// 微信支付文字顔色
	.we_chat_pay {
		color: #58B93B;
	}
	// 餘額支付文字顔色
	.balance {
		color: #38C5D8;
	}
</style>
           

繼續閱讀