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