vue 實現(xiàn)特定條件下綁定事件
更新時間：2019年11月09日 10:26:13 作者：灰姑娘的冰眸
今天小編就為大家分享一篇vue 實現(xiàn)特定條件下綁定事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
今天寫了個小功能，看起來挺簡單，寫的過程中發(fā)現(xiàn)了些坑。
1.div沒有disabled的屬性，所以得寫成button
2.disabled在data時，默認(rèn)是true，使得初始化時，默認(rè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; //打勾時，可以點擊按鈕
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 實現(xiàn)特定條件下綁定事件就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
下面小編就為大家分享一篇vue.js或js實現(xiàn)中文A-Z排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue框架render方法如何替換template，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了徹底揭秘keep-alive原理(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue監(jiān)聽input標(biāo)簽的value值方法
今天小編就為大家分享一篇vue監(jiān)聽input標(biāo)簽的value值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
項目開發(fā)中因為ui設(shè)計常常需要修改vue常用的組件庫（element,antD等等）,這就需要用到樣式穿透,下面這篇文章主要給大家介紹了關(guān)于Vue3樣式滲透之deep()為什么無效的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue3中?provide?和?inject?用法小結(jié)
父子組件傳遞數(shù)據(jù)時,使用的是props和emit,父傳子時,使用的是?props,如果是父組件傳孫組件時,就需要先傳給子組件,子組件再傳給孫組件,如果多個子組件或多個孫組件使用時,就需要傳很多次,會很麻煩,這篇文章主要介紹了vue3中?provide?和?inject?用法,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue接入騰訊防水墻代碼，代碼超級簡單，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue項目打包優(yōu)化方式(讓打包的js文件變小)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了深入理解vue Render函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07