快捷導(dǎo)航

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

更新時(shí)間：2019年11月09日 10:26:13 作者：灰姑娘的冰眸

今天小編就為大家分享一篇vue 實(shí)現(xiàn)特定條件下綁定事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

今天寫了個(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析
在Vue項(xiàng)目中,Markdown文檔的使用越來越普遍,因此在Vue中如何進(jìn)行Markdown文檔展示與解析也成為了一個(gè)熱門話題,本文將介紹如何使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2024-01-01
Vue過濾器的用法和自定義過濾器使用
本篇文章主要介紹了Vue過濾器的用法和自定義過濾器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
詳解如何在Vue3中實(shí)現(xiàn)懶加載組件
隨著現(xiàn)代前端框架的發(fā)展,懶加載作為一種優(yōu)秀的性能優(yōu)化技術(shù),在用戶體驗(yàn)和加載速度上扮演著越來越重要的角色,本文將詳細(xì)介紹如何在 Vue 3 中實(shí)現(xiàn)懶加載組件,確保你能夠?qū)⑦@一技術(shù)應(yīng)用到自己的項(xiàng)目中,需要的朋友可以參考下
2024-11-11
Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說明
這篇文章主要介紹了Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vuex中g(shù)etters和actions的使用補(bǔ)充說明
這篇文章主要介紹了在Vuex中關(guān)于getters和actions使用的補(bǔ)充作了簡要說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2021-09-09
一文輕松了解v-model及其修飾符
這篇文章主要給大家介紹了關(guān)于v-model及其修飾符的相關(guān)資料,v-model指令有三個(gè)可以選用的修飾符：.lazy、.number以及.trim,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-11-11
在vue3項(xiàng)目中給頁面添加水印的實(shí)現(xiàn)方法
這篇文章主要給大家介紹一下在vue3項(xiàng)目中添加水印的實(shí)現(xiàn)方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來看看吧
2023-08-08
Vue路由對(duì)象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對(duì)象屬性 .meta $route.matched詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue事件符.capture的含義及用法說明
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06