如何在Vuejs中满足条件时更改按钮颜色？
如何在Vuejs中满足条件时更改按钮颜色？
提问于 2021-04-17 01:08:38
computed: {
empty() {
return this.user.password === '' || this.user.confirmPassword === '';
},
equal() {
return !this.user.password && !this.$v.user.password.valid === !this.user.confirmPassword && !this.$v.user.confirmPassword.sameAsPassword
},.no-empty {
opacity: 1.5;
background-color: #ee1d24;
}
.empty {
width: 160px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #fff;
background-color: #f68e91;
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;
}<button
type="submit"
class="register-button-screen2"
value="Register"
:disabled="
(user.password && !$v.user.password.valid) ||
(user.confirmPassword &&
!$v.user.confirmPassword.sameAsPassword)
"
:class="[empty || !equal ? 'empty' : 'no-empty']"
@click="preset"
>
Clickme
</button>
用我的平等方法。它正在比较密码是否相等。(这很好用)但在我的按钮中，禁用了那个条件，我需要用相等的方法来设置。(这样，如果它只是字母数字值，它就会改变颜色)
回答 1
Stack Overflow用户
发布于 2021-04-17 02:14:51
在VueJS中，您可以使用对象设置类和样式。
以VueJS docs中的以下代码为例
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>使用对象语法修改类时，可以将属性值设置为布尔变量。
如果布尔值为false，则不应用该类。如果布尔值为true，则应用该类。
请注意如何将绑定的类对象与不变的静态类字符串组合在一起。
您还可以通过类似的方式直接修改样式：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>这一次，您必须向属性传递字符串值，而不是传递布尔值。
用连字符连接的属性名称可以替换为驼峰式大小写或烤肉串大小写(后者需要引号)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67129461
复制相关文章
相似问题
腾讯云开发者
