溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue 實(shí)現(xiàn)特定條件下綁定事件

發(fā)布時(shí)間：2020-09-12 13:57:15 來源：腳本之家 閱讀：198 作者：灰姑娘的冰眸 欄目：web開發(fā)

今天寫了個(gè)小功能，看起來挺簡單，寫的過程中發(fā)現(xiàn)了些坑。

1.div沒有disabled的屬性，所以得寫成button

2.disabled在data時(shí)，默認(rèn)是true，使得初始化時(shí)，默認(rèn)置灰按鈕，無法點(diǎn)擊

<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服務(wù)協(xié)議》</a>及隱私保護(hù)條款</div>
</div>
<button class='btn' ref='btn_submit' :disabled="isDisable" @click="check()">
  提交
</button>
export default {
  data() {
    return {
　　　　　　　checkShow: false,
      isDisable: true,
　　　　}
　　}，

methods: {
　　
/**
 * 協(xié)議勾選
 */
checkMark() {
  this.checkShow = !this.checkShow;
  if (this.checkShow === true) { 
    this.isDisable = false; //打勾時(shí)，可以點(diǎn)擊按鈕
    this.$refs.btn_submit.style.background = '#fa8919';
  } else {
    this.isDisable = true;  //不打勾時(shí)，不可以點(diǎn)擊按鈕
    this.$refs.btn_submit.style.background = '#999';
  }
},
/**
 *   提交按鈕
 */
　　　check() {
　　　　　　if (this.checkShow === false) {
          console.log('不能提交');
        } else { 
          console.log('能提交');
        }
　　　　　　}
　　　}
}

以上這篇vue 實(shí)現(xiàn)特定條件下綁定事件就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手