vue修改密码中确认密码不对显示边框为红色并且下行显示确认密码错误

在Vue中实现修改密码功能时，通常需要对用户输入的密码和确认密码进行校验。如果确认密码与原始密码不一致，可以通过绑定表单输入框的`:class`或`:style`属性来动态改变边框颜色，并使用`v-if`指令来条件性地显示错误提示信息。

以下是一个简单的实现示例：

1. 在模板中创建两个输入框，用于输入新密码和确认密码。使用`v-model`指令来实现双向数据绑定。

<template>
  <div>
    <input type="password" v-model="newPassword" />
    <input type="password" v-model="confirmPassword" />
    <!-- 条件性地显示错误信息 -->
    <div v-if="showConfirmError" class="error-message">确认密码错误</div>
  </div>
</template>

2. 在Vue组件的`data`函数中定义`newPassword`、`confirmPassword`和`showConfirmError`。

<script>
export default {
  data() {
    return {
      newPassword: '',
      confirmPassword: '',
      showConfirmError: false,
    };
  },
};
</script>

3. 在相应的`<script>`标签内添加一个方法，比如`checkPasswordMatch`，用于检查两个密码是否匹配。如果在表单提交或相应的事件触发时检查到不匹配，将`showConfirmError`设置为`true`，并通过CSS类或内联样式改变确认密码输入框的边框颜色。

methods: {
  checkPasswordMatch() {
    if (this.newPassword !== this.confirmPassword) {
      // 将显示错误信息的变量设置为true
      this.showConfirmError = true;
      // 动态改变确认密码输入框的边框颜色为红色
      // 如果使用class，可以定义一个.error类
      // 如果使用style，直接设置边框颜色
      this.confirmPasswordInput.style.borderColor = 'red';
    } else {
      // 如果匹配，则清除错误信息和样式
      this.showConfirmError = false;
      this.confirmPasswordInput.style.borderColor = '';
    }
  }
}

4. 确保在模板中引用输入框时能够获取到对应的DOM元素，以便操作其样式。

<input ref="confirmPasswordInput" type="password" v-model="confirmPassword" @blur="checkPasswordMatch" />

5. 在CSS中定义错误信息显示的样式和输入框边框颜色样式。

<style>
.error-message {
  color: red;
}
.input-error {
  border-color: red;
}
</style>

通过上述步骤，当用户在界面上输入密码并触发相应的校验时，如果确认密码输入错误，就会显示红色边框以及错误提示信息。