举个小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> v-model </title>
<script src="../libs/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
border: 1px solid red;
height: 200px;
width: 200px;
}
.bg {
background: green;
}
.bg1 {
border: 5px solid pink
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="user.username" placeholder="请输入用户名" />
</div>
<div>
<input type="password" v-model="user.password" placeholder="请输入密码" />
</div>
<div>
<label>
<input type="radio" name="sex" v-model="user.sex" value="男"> 男
</label>
<label>
<input type="radio" name="sex" v-model="user.sex" value="女"> 女
</label>
</div>
<div>
<select name="" id="" v-model="user.classes">
<option value="">请选择</option>
<option value="sy2201">sy2201</option>
<option value="sy2202">sy2202</option>
</select>
</div>
<div>
<label>
是否毕业 <input type="checkbox" v-model="user.isFinish">
</label>
</div>
<div>
<textarea name="" id="" cols="30" rows="10" v-model="user.desc"></textarea>
</div>
<button @click="getInfo">获取信息</button>
</div>
<script>
/**
* v-model双向的指令 数据改变 -- 视图改变
* 视图改变 -- 数据改变
*/
new Vue({
el: "#app",
data: {
// 存储成一个对象
user: {
isFinish: false,
username: "",
password: "",
sex: "男",
classes: "sy2201",
desc: "hahah"
}
},
methods: {
getInfo() {
// 提交这个对象
console.log(this.user, 'user')
}
}
})
</script>
</body>
</html>
