vuejs中所有字段都填完后如何更改按钮颜色?

时间:2021-03-12 02:54:09

标签: javascript vue.js

尝试更改按钮颜色,在用户输入所有字段后,但计算属性有问题,

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>

尝试更改按钮颜色,在用户输入所有字段后,但计算属性出现问题, 尝试更改按钮颜色,在用户输入所有字段后,但计算属性出现问题,

1 个答案:

答案 0 :(得分: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>