溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天寫了個小功能，看起來挺簡單，寫的過程中發現了些坑。
1.div沒有disabled的屬性，所以得寫成button
2.disabled在data時，默認是true，使得初始化時，默認置灰按鈕，無法點擊
<div class='form-item'>
<div class="checkWrap clearfix" @click='checkMark()'>
<div class="checkBox" v-show="checkShow"></div>
</div>
<div>我已閱讀并接受<a rel="external nofollow" @click="conserve()">《xxx服務協議》</a>及隱私保護條款</div>
</div>
<button class='btn' ref='btn_submit' :disabled="isDisable" @click="check()">
提交
</button>
export default {
data() {
return {
checkShow: false,
isDisable: true,
}
}，
methods: {
/**
* 協議勾選
*/
checkMark() {
this.checkShow = !this.checkShow;
if (this.checkShow === true) {
this.isDisable = false; //打勾時，可以點擊按鈕
this.$refs.btn_submit.style.background = '#fa8919';
} else {
this.isDisable = true; //不打勾時，不可以點擊按鈕
this.$refs.btn_submit.style.background = '#999';
}
},
/**
* 提交按鈕
*/
check() {
if (this.checkShow === false) {
console.log('不能提交');
} else {
console.log('能提交');
}
}
}
}
以上這篇vue 實現特定條件下綁定事件就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
