vueは特定の条件の下でイベントをバインディングすることを実現します。
1634 ワード
今日は小さな機能を書きました。簡単に見えます。書いているうちに穴を見つけました。
1.divはdisabledの属性がないので、buttonと書くべきです。
2.disabled dataの時、デフォルトはtrueです。初期化の時、デフォルトはグレーボタンを置いて、クリックできません。
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" rel="external nofollow" @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(' ');
}
}
}
}
以上のこのvueは特定の条件の下で結び付ける事件を実現します。つまり、小編集は皆さんに全部の内容を共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。