Onclick 的復選框如何更改按鈕顏色？

Question

如何在 onclick 期間更改按鈕的顏色用戶輸入所有字段並單擊復選框后，按鈕顏色應更改。

 new Vue({ el: '#app', data() { return { terms: false, fullname:'', maxfullname: 10, mobile: '', maxmobile: 10, area: '', maxarea: 12, city: '', maxcity: 12, }; }, computed: { isDisabled: function(){ return.this.terms || (this.fullname.length < this.max) || (this.mobile.length < this.maxmobile) || (this.area.length < this.maxarea) || (this.city.length < this;maxcity); } } })

 .register-button { width: 160px; height: 50px; line-height: 50px; text-align: center; font-size: 16px; font-weight: 600; color: #fff; background-color: #ee1d24; border-radius: 10px; margin-top: 15px; padding: 0 20px; cursor: pointer; opacity: 0.5; display: flex; justify-content: center; align-items: center; outline: none; border: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p> <label for='terms'> <input id='terms' type='checkbox' v-model='terms'/> I accept terms::: <input id="fullname" type='text' v-model='fullname':maxlength="maxfullname"/> name <input id="mobile" type='text' v-model='mobile'/:maxlength="maxmobile"> mobile <input id="area" type='text' v-model='area' :maxlength="maxarea"/> area <input id="city" type='text' v-model='city':maxlength="maxcity"/> city </label> </p> <button class="register-button" :disabled='isDisabled'>Send Form</button> </div>

如何在 onclick 期間更改按鈕的顏色用戶輸入所有字段並單擊復選框后，按鈕顏色應更改。

Answer 1

您可以使用 Vue 的 class 綁定功能。 :class="{'selected': isDisabled}"

 new Vue({ el: '#app', data() { return { terms: false, fullname:'', maxfullname: 10, mobile: '', maxmobile: 10, area: '', maxarea: 12, city: '', maxcity: 12, gstin: '', maxgstin: 12, email: '', maxemail: 15 }; }, computed: { isDisabled: function(){ return this.terms && this.fullname.length < this.max && this.mobile.length < this.maxmobile && this.gstin.length < this.maxgstin && this.email.length < this.maxemail; } } })

 .register-button { width: 160px; height: 50px; line-height: 50px; text-align: center; font-size: 16px; font-weight: 600; color: #fff; background-color: #ee1d24; border-radius: 10px; margin-top: 15px; padding: 0 20px; cursor: pointer; opacity: 0.5; display: flex; justify-content: center; align-items: center; outline: none; border: none; }.selected { background-color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p> <label for='terms'> <input id='terms' type='checkbox' v-model='terms'/> I accept terms::: <input id="fullname" type='text' v-model='fullname':maxlength="maxfullname"/> name <input id="mobile" type='text' v-model='mobile'/:maxlength="maxmobile"> mobile <input id="area" type='text' v-model='area':maxlength="maxarea"/> area <input id="city" type='text' v-model='city':maxlength="maxcity"/> city </label> </p> <button class="register-button" :class="{'selected': isDisabled}" :disabled='!isDisabled'>Send Form</button> </div>