vue密码强度提示条

以下是使用vue.js和ElementUI实现密码强度提示条的示例代码：

<template>
  <div>
    <el-input v-model="password" placeholder="请输入密码" @input="checkPassword"></el-input>
    <el-progress :percentage="percentage" :color="color"></el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      percentage: 0,
      color: ''
    }
  },
  methods: {
    checkPassword() {
      let len = this.password.length
      if (len === 0) {
        this.percentage = 0
        this.color = ''
      } else if (len < 6) {
        this.percentage = 30
        this.color = 'danger'
      } else if (len < 10) {
        this.percentage = 60
        this.color = 'warning'
      } else {
        this.percentage = 100
        this.color = 'success'
      }
    }
  }
}
</script>

在这个示例中，我们使用了ElementUI的`el-input`组件来获取用户输入的密码，并使用`@input`事件监听输入变化。在`checkPassword`方法中，我们根据密码长度的不同来设置进度条的百分比和颜色。当密码长度小于6时，进度条为红色，长度在6到10之间时为黄色，长度大于10时为绿色。