Vue.js 密码校验：包含字母或数字且不超过20位

以下是一个使用 Vue.js 实现的密码校验的例子：

<template>
  <div>
    <input type='password' v-model='password' @input='validatePassword' placeholder='请输入密码'>
    <p v-if='passwordError' class='error'>密码必须包含字母或数字且长度不能超过20位</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      passwordError: false
    }
  },
  methods: {
    validatePassword() {
      const regex = /^(?=.*[a-zA-Z0-9]).{1,20}$/; // 密码必须包含字母或数字，且长度不能超过20位
      this.passwordError = !regex.test(this.password);
    }
  }
}
</script>

<style>
.error {
  color: red;
}
</style>

在上面的例子中，我们使用了v-model指令来绑定输入框的值到password属性。当输入框的内容发生变化时，@input事件会触发validatePassword方法，该方法使用正则表达式来校验密码是否符合要求。

如果密码不符合要求，则将passwordError属性设置为true，从而显示错误提示信息。

你可以根据自己的需求修改正则表达式来实现其他的密码校验规则。