v-model命令(雙向繫結)
阿新 • • 發佈:2022-03-29
v-model命令(雙向繫結)
格式:v-model="變數"
作用2:獲取和設定表單裡的值
作用2:表單裡輸入可以改變變數的值,修改變數可以改變表單的值
<div id="app"> <!--v-model:雙向繫結,使用者輸入按提交可以更改變數的值,使用者按修改也可以反向修改-->> <form> 賬號:<input type="text" v-model="uname"><br> 密碼:<input type="password" v-model="pwd"><br> <input type="button" @click="sub" value="提交"> <input type="button" @click="cs" value="修改賬號密碼"> </form> </div> <script> var app=new Vue({ el:"#app", data:{ uname:"", pwd:"", }, methods:{ sub:function(){ console.log(this.uname); console.log(this.pwd); if(this.pwd=="123"&&this.uname=="123"){ alert("登陸成功!"); } else{ alert("登陸失敗!"); } }, cs:function(){ this.uname="000" this.pwd="000" } } }) </script>