Question

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>

以我的平等方法。它在哪里比较密码是否相等。（工作正常）但是在我的按钮中禁用该条件下我需要设置相等的方法。（如果它只是字母数字值，它会改变颜色）

Answer 1

在 VueJS 中，您可以使用对象设置类和样式。

以VueJS docs中的以下内容为例：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

使用对象语法修改类时，可以将属性值设置为布尔变量。

如果布尔值为假，则不应用该类。如果布尔值为真，则应用该类。

注意如何将绑定的类对象与不变的静态类字符串结合起来。

你也可以用类似的方式直接修改样式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

这次不是传递布尔值，而是必须将字符串值传递给属性。

带连字符的属性名称可以替换为驼峰式或烤肉串（后者需要引号）。

如何在Vuejs中满足条件时更改按钮颜色？

1 个答案: