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

效果

未输入input前图片

前端vue按钮控制切换按钮是否禁用和颜色和显示隐藏,利用v-if和v-else_第1张图片

输入input后图片

前端vue按钮控制切换按钮是否禁用和颜色和显示隐藏,利用v-if和v-else_第2张图片

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控制切换按钮

你可能感兴趣的:(前端,vue.js,javascript,按钮控制显示隐藏v-if)