vue双向数据绑定v-model绑定单选框，复选框，下拉框

v-model使用

- 1. 简单的demo
- 2. 三种框的绑定

注意它是自动帮你确认值的！！！无需关心过程，把json数据一丢到data中，自动选中。

1. 简单的demo

实现一边在输入框输入，一边显示输入框的内容

2. 三种框的绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue 数据双向绑定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 中文文档地址 -->
</head>
<body><!-- 数据和model的双向绑定-- 表单输入绑定https://cn.vuejs.org/v2/guide/forms.html--><div id="app"><h4>msg: {{ message }}</h4><input type="text" v-model="message"/></div><!-- 单选框 --><div id="app1"><h4>gender: {{ gender }}</h4><input name ="gender" type="radio" value="男" v-model="gender"> 男<input name ="gender" type="radio" value="女" v-model="gender"> 女</div><!-- 多选框 --><div id="app2"><h4>hobby: {{ hobby }}</h4><input name="hobby" type="checkbox" value="1" v-model="hobby">篮球<input name="hobby" type="checkbox" value="2" v-model="hobby">羽毛球<input name="hobby" type="checkbox" value="3" v-model="hobby">pingPong球<input name="hobby" type="checkbox" value="4" v-model="hobby">足球</div><!-- 下拉框 --><div id="app3"><h4>selected: {{ selected }}</h4><select v-model="selected"><option value="" disabled>=== 请选择 ====</option><option>java</option><option>python</option><option>go</option></select></div><script>let app = new Vue({el: "#app",data: {message: "hello, vue.js!"}});new Vue({el: "#app1",data: {gender: "女"}});new Vue({el: "#app2",/* 多个复选框请使用数组 */data: {hobby: ["2", "3"]}});/* 下拉框 绑定数据 */new Vue({el: "#app3",data: {selected: ""// selected: "java" 会自动选中java这一项}});</script></body>
</html>