I wrote a small function today, which looks quite simple, and I found some pitfalls during the writing process.
There is no disabled attribute, so it has to be written as button
When data, the default is true, so that the default gray button cannot be clicked during initialization.
<div class='form-item'>
<div class="checkWrap clearfix" @click='checkMark()'>
<div class="checkBox" v-show="checkShow"></div>
</div>
<div>I've read and accepted<a href="" rel="external nofollow" @click="conserve()">《xxxService Agreement》</a>and privacy protection terms</div>
</div>
<button class='btn' ref='btn_submit' :disabled="isDisable" @click="check()">
submit
</button>
export default {
data() {
return {
checkShow: false,
isDisable: true,
}
}，
methods: {
/**
* Agreement check
*/
checkMark() {
= !;
if ( === true) {
= false; // When ticking, you can click the button this.$refs.btn_submit. = '#fa8919';
} else {
= true; //When you don't check it, you can't click the button this.$refs.btn_submit. = '#999';
}
},
/**
* Submit button
*/
check() {
if ( === false) {
('Cannot submit');
} else {
('Can submit');
}
}
}
}
The above article vue implementation of binding events under specific conditions is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.