使用v-model双向绑定
使用v-model双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h3>个人信息表单</h3>
<p>
姓名:<input type="text" v-model = "name">
</p>
<p>性别:
<input type="radio" name="sex" value="男" v-model = "sex">男
<input type="radio" name="sex" value="女" v-model = "sex">女
</p>
<p>爱好:
<input type="checkbox" name="hobby" value="打篮球" v-model = "hobby">打篮球
<input type="checkbox" name="hobby" value="看书" v-model = "hobby">看书
<input type="checkbox" name="hobby" value="放风筝" v-model = "hobby">放风筝
</p>
<p>籍贯:
<select name="native" id="" v-model = "native">
<option value="河北">河北</option>
<option value="河北">山东</option>
<option value="河北">山西</option>
<option value="河北">湖南</option>
<option value="河北">湖北</option>
</select>
</p>
<p>
您填写的表单内容:姓名:{{name}},性别:{{sex}},爱好:{{hobby}},籍贯:{{native}}
</p>
<button @click = "submit">提交信息</button>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
sex:'',
hobby:[],
native:''
},
methods:{
submit(){
let obj = {
name:this.name,
sex:this.sex,
hobby:this.hobby,
native:this.native
}
console.log(obj)
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号