1. 程式人生 > 其它 >v-model命令(雙向繫結)

v-model命令(雙向繫結)

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>