主要代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<label for="password">密码：</label>
<input type="password" name="password" id="password" v-model="pwd" >
<input type="button" value="提交">
<meter max="10" min="0" high="8" low="4" id="myMeter"></meter>
<label id="qd"></label>
</div>
<script>
//oninput是H5新的事件进行文本框内容的监听
document.getElementById("password").oninput=function(){
//注意切记要在这里面进行变量的赋值，不要傻傻的在外面进行赋值，因为是监听文本框中的内容进行改变的。
var length=document.getElementById("password").value.length;
document.getElementById("myMeter").value=length;
if(length<4||length==4){
//修改标签里的值进行显示
document.getElementById("qd").innerText="弱";
} else if(length>4&&length<8){
document.getElementById("qd").innerText="一般";
}else{
document.getElementById("qd").innerText="强";
}
}
</script>
</body>
</html>
运行结果：
弱密码
一般的密码
强密码
本文地址：https://blog.csdn.net/Dreamer_Ji/article/details/107374171
