v-model 之 双向数据绑定
2020-07-13 本文已影响0人
瑟闻风倾
Vue 中使用v-model 指令来实现表单元素和数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- value属性只能将数据变化同步到视图 -->
<input type="text" :value="name">
<!-- v-model系统指令能够实现双向数据绑定，即不仅能将数据变化同步到视图，还能将视图上的变化同步到数据 -->
<input type="text" v-model="phone">
<!-- 表单提交默认方法是get可省略不写，action="#"代表提交到当前页面 -->
<form action="#">
<input type="text" id="username" v-model="user.uname">
<input type="password" id="pwd" v-model="user.upwd">
<input type="button" v-on:click="submit" value="注册">
</form>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"liy",
phone:"123456",
user:{
uname:"",
upwd:""
}
},
methods:{
submit:function(){
alert("username=" + this.user.uname + "," + "password=" + this.user.upwd);
console.log("username=" + this.user.uname + "," + "password=" + this.user.upwd);
}
}
});
</script>
</html>
