在 vuejs 中填写所有字段后如何更改按钮颜色？

Question

Tried changing button color, after user enter all fields, but issue with the computed property,

 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; }.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' v-on:click=" isFirstScreen">Send Form</button> </div>

Tried changing button color, after user enter all fields, but issue with the computed property, Tried changing button color, after user enter all fields, but issue with the computed property,

Answer 1

 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 === '' || this.mobile === '' || this.area === '' || this.city === '' } } })

 .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="(isDisabled) ? '' : 'selected'" :disabled='isDisabled'>Send Form</button> </div>