前端vue按钮控制切换按钮是否禁用和颜色和显示隐藏，利用v-if和v-else

效果

未输入input前图片

输入input后图片

html

(1)

<input type="number" placeholder="请输入分润数量" placeholder-class="shareprofit_placeholder_num" v-model="money">
<!-- 金钱 -->
{{money}}
<!-- 可提现余额 -->
{{balance}}
<button v-if="money*1<=balance*1" type="primary" @click="popup">提交申请</button>
<button v-else disabled @click="popup">未提交申请</button>

(2)

<view v-if="money*1<=balance*1" @click="shareprofitSubmit" class="consumption_btn">
	分润</view>
<view v-else class="consumption_btn_gray">无法分润</view>

JS

data() {
	return {
		balance：'',
		money: '',
	}
},

总结

利用v-if和v-else控制切换按钮