Javascript 如果vuejs中的密码和确认密码字段匹配，则更改按钮颜色时出现问题？

密码：“”，
确认密码：“”，
计算：{
空的（）{
返回this.user.password==''| | this.user.confirmPassword==''；
},
相等（）{
返回this.user.password===this.user.confirmPassword；
}
}

.empty{
宽度：160px；
高度：50px；
线高：50px；
文本对齐：居中；
字体大小：16px；
字号：600；
颜色：#fff；
背景色：#f68e91；
边界半径：10px；
边缘顶部：15px；
填充：0 20px；
光标：指针；
不透明度：0.5；
显示器：flex；
证明内容：中心；
对齐项目：居中；
大纲：无；
边界：无；
}
1.没有空的{
不透明度：1.5；
背景色：#ee1d24；
}

发送

如果我理解正确，您希望颜色仅在两个密码值均为非空且相等时更改，对吗

如果是这样，三元条件只计算

空

而不是

相等

。只需更新模板中的条件：

发送

---

如果需要，您还可以以相同的方式更新

：disabled

属性条件。

方法1-使用模板内样式，而不使用函数

步骤1：HTML模板将被删除

<div id="app">
<input v-model="user.password" type="text" />
<input v-model="user.confirmPassword" type="text" />
<button :class="user.password && user.confirmPassword && user.password === user.confirmPassword  ? 'match' : 'nomatch'" :disabled="empty">
  Send
</button>

发送

步骤2：脚本将被删除

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        password: "",
        confirmPassword: "",
      },
    };
  },
  computed: {
    empty() {
      return this.user.password === "" && this.user.confirmPassword === "";
    },
  },
};

  <script>
  export default {
    name: "App",
    data() {
      return {
        user: {
          password: "",
          confirmPassword: "",
        },
      };
    },
    computed: {
      empty() {
        return this.user.password === "" && this.user.confirmPassword === "";
      },
    },
    methods: {
      matchPassword() {
        if (
          this.user.password &&
          this.user.confirmPassword &&
          this.user.password === this.user.confirmPassword
        ) {
          return true;
        } else {
          return false;
        }
      },
    },
  };
</script>

导出默认值{
名称：“应用程序”，
数据（）{
返回{
用户：{
密码：“”，
确认密码：“”，
},
};
},
计算：{
空的（）{
返回this.user.password===”&&this.user.confirmPassword===”；
},
},
};

步骤3：样式如下

<style>
.nomatch {
  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;
}

.match {
  opacity: 1.5;
  background-color: #ee1d24;
}
</style>

<div id="app">
<input v-model="user.password" type="text" />
<input v-model="user.confirmPassword" type="text" />
<button :class="this.matchPassword() ? 'match' : 'nomatch'" :disabled="empty">
  Send
</button>

诺马奇先生{
宽度：160px；
高度：50px；
线高：50px；
文本对齐：居中；
字体大小：16px；
字号：600；
颜色：#fff；
背景色：#f68e91；
边界半径：10px；
边缘顶部：15px；
填充：0 20px；
光标：指针；
不透明度：0.5；
显示器：flex；
证明内容：中心；
对齐项目：居中；
大纲：无；
边界：无；
}
.比赛{
不透明度：1.5；
背景色：#ee1d24；
}

方法2-带有函数处理程序的HTML模板

步骤1：如下所示的HTML模板

<style>
.nomatch {
  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;
}

.match {
  opacity: 1.5;
  background-color: #ee1d24;
}
</style>

<div id="app">
<input v-model="user.password" type="text" />
<input v-model="user.confirmPassword" type="text" />
<button :class="this.matchPassword() ? 'match' : 'nomatch'" :disabled="empty">
  Send
</button>

发送

步骤2：脚本将被删除

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        password: "",
        confirmPassword: "",
      },
    };
  },
  computed: {
    empty() {
      return this.user.password === "" && this.user.confirmPassword === "";
    },
  },
};

  <script>
  export default {
    name: "App",
    data() {
      return {
        user: {
          password: "",
          confirmPassword: "",
        },
      };
    },
    computed: {
      empty() {
        return this.user.password === "" && this.user.confirmPassword === "";
      },
    },
    methods: {
      matchPassword() {
        if (
          this.user.password &&
          this.user.confirmPassword &&
          this.user.password === this.user.confirmPassword
        ) {
          return true;
        } else {
          return false;
        }
      },
    },
  };
</script>

导出默认值{
名称：“应用程序”，
数据（）{
返回{
用户：{
密码：“”，
确认密码：“”，
},
};
},
计算：{
空的（）{
返回this.user.password===”&&this.user.confirmPassword===”；
},
},
方法：{
匹配密码（）{
如果(
此为.user.password&&
this.user.confirmPassword&&
this.user.password===this.user.confirmPassword
) {
返回true；
}否则{
返回false；
}
},
},
};

步骤3：样式

<style>
.nomatch {
  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;
}

.match {
  opacity: 1.5;
  background-color: #ee1d24;
}
</style>

诺马奇先生{
宽度：160px；
高度：50px；
线高：50px；
文本对齐：居中；
字体大小：16px；
字号：600；
颜色：#fff；
背景色：#f68e91；
边界半径：10px；
边缘顶部：15px；
填充：0 20px；
光标：指针；
不透明度：0.5；
显示器：flex；
证明内容：中心；
对齐项目：居中；
大纲：无；
边界：无；
}
.比赛{
不透明度：1.5；
背景色：#ee1d24；
}

这两种方法都可以很好地工作。请找到下面的演示链接

---

工作正常，我有：disabled=“user.password&&！$v.user.password.valid | | user.confirmPassword&！$v.user.confirmPassword.sameAsPassword”，如果只匹配，它将检查字母数字正则表达式条件，如果我输入aaaa，aaaa按钮颜色正在改变，它将从Aapproach1代码开始处理，现在从上面的变化，如果我输入aaaa和aaaa按钮的颜色是变化的。如果出现以下情况，则要继续：disabled=“user.password&&！$v.user.password.valid | | user.confirmPassword&！$v.user.confirmPassword.sameAsPassword”matches@taneerudhanunjay两个密码都匹配，然后我们将更改按钮颜色。@taneerudhanujay请检查下面的链接。这就是你想要的@我创建了新的演示链接。希望这能解决你的问题。如果这有助于你对答案竖起大拇指。检查链接并让我知道。我应该做的是，如果我尝试输入任何随机相等密码，则颜色将为空，如果它仅为字母数字值，则为非空。我已经更新了我的代码，请你检查一下，这对我真的很有帮助。谢谢