天天看点

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>
           

继续阅读