vue 特定条件下绑定事件
生活随笔
收集整理的這篇文章主要介紹了
vue 特定条件下绑定事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天寫了個小功能,看起來挺簡單,寫的過程中發現了些坑。
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 href="http://www.baidu.com" @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('能提交');}}} }
更多專業前端知識,請上 【猿2048】www.mk2048.com
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 href="http://www.baidu.com" @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('能提交');}}} }
更多專業前端知識,請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的vue 特定条件下绑定事件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: VUE-搜索过滤器
- 下一篇: 用过的jQuery记录