15.VUE學習之-表單中使用key唯一令牌解決表單值混亂問題
阿新 • • 發佈：2019-01-07
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue</title> <link rel="stylesheet" href=""> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="vue"> <div v-if="regType=='email'"> <!--選擇不同的單選,會把當前value的值賦值給下面data庫裡regType,從而影響上面的if判斷的結果,達到切換顯示手機或者郵箱輸入框的效果--> 郵箱:<input name="username" key="email" type="text"> </div> <div v-else> 手機:<input name="username" key="phone" type="text"> </div> <br> <!--選擇不同的單選,會影響到下面data庫裡regType裡的值--> <input v-model="regType" name="email" value="email" type="radio">郵箱 <input v-model="regType" name="phone" value="phone" type="radio">手機 </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#vue", data:{ regType:'email', } }); </script> </html>
效果:
