效果體驗：
http://hovertree.com/texiao/vue/1/
代碼如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>vue.js表單密碼強度驗證代碼 - 何問起</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://hovertree.com/texiao/vue/1/css/normalize.min.css">
<link rel="stylesheet" href="http://hovertree.com/texiao/vue/1/css/style.css">
</head>
<body>
<div id="app">
<h2>html5密碼強度顯示</h2>
<div class="input_container">
<input type="password" @input="p_len" v-model="password" placeholder="輸入密碼" />
<span v-bind:class="{ valid_password_length: valid_password_length , show_password_length: typed}" class="password_length">{{password_length}}</span> </div>
<div class="lnu_container">
<p v-bind:class="{ lovercase_valid: contains_lovercase }">小寫字母</p>
<p v-bind:class="{ number_valid: contains_number }">數字</p>
<p v-bind:class="{ uppercase_valid: contains_uppercase }">大寫字母</p>
</div>
<div class="valid_password_container" v-bind:class="{show_valid_password_container : valid_password }">
<svg width="100%" height="100%" viewBox="0 0 140 100">
<path class="tick" v-bind:class="{checked: valid_password }"
d="M10,50 l25,40 l95,-70" />
</svg>
</div>
</div>
<script src="http://hovertree.com/texiao/vue/1/js/vue.min.js"></script>
<script src="http://hovertree.com/texiao/vue/1/js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用浏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏覽器。</p>
<p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a> <a href="http://hovertree.com/h/bjag/dn9q6gy3.htm" target="_blank">源碼</a></p>
</div>
</body>
</html>