javascript - Onclick复选框如何更改按钮颜色?
问题描述
如何在 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 期间更改按钮的颜色用户输入所有字段并单击复选框后,按钮颜色应更改。
解决方案
您可以使用 Vue 的类绑定功能。
: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>
推荐阅读
- java - 这是电源实现的功能,我也得到了逻辑和代码,但在偶数情况下,输出中没有填充数字和电源
- css - 邪恶的 pdf 自定义字体无法在 Rails 应用程序中正确加载
- python - 使用 Kivy 重复背景图像始终保持图像大小
- python - 在不使用 pandas 的情况下在列表上应用多个聚合函数
- jmeter - Jmeter - 发票中显示相同的用户详细信息
- python - 将 matplotlib 混淆矩阵的比例标签中的数字格式更改为百分比
- javascript - python -m http.server 不满足 XMLHttpRequest()
- python - U-net神经网络中不等宽高的输入图像
- coldfusion - 带有 Coldfusion 的手动 JSON 数组 - 在我用动态值替换之前一直有效
- shopify - Makung 请求在 shopify 液体文件中使用 shopify api