这里要说明一下，在v-model 绑定的值是id还是value是和<option>中的v-bind保持一致的，如第四个，如果是
<option :value="op[1]" 那v-model绑定的就是数组第二项的值2，4，6
如果是
<option :value="op[1]" 那v-model绑定的就是数组第一项的值1，3，5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>1.复选框</h1>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<h1>2.单选按钮</h1>
<!-- <input type="radio" id="one" value="One" v-model="picked">One-->
<!-- <input type="radio" id="two" value="Two" v-model="picked">Two-->
<div v-for="option in options" :key="option.id">
<input
type="radio"
:id="option.id"
:value="option.value"
v-model="selectedOption"/>
/>
<label :for="option.id">{{ option.text }}</label>
</div>
<p>选中的是：{{ selectedOption }}</p>
<h1>3.渲染动态选项</h1>
<select v-model="selected">
<option v-for="option in options1" :value="option.text">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<h1>4.动态渲染 v-model绑定value与key的问题</h1>
<select v-model="test">
<option :value="op[1]" v-text="op[0]" v-for="op in options2"></option>
</select>
<div v-text="test"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
checkedNames:["Jack","John"],//初始化时多选框选中的数据
selectedOption: 'Option 2',//v-model默认绑定的是value；因为v-model是个语法糖，是:value='值'和input事件的结合体
options: [
{ id: '1', value: 'Option 1', text: '选项1' },
{ id: '2', value: 'Option 2', text: '选项2' },
{ id: '3', value: 'Option 3', text: '选项3' },
],
selected: 'One',
test: '',
options1: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options2:[
[1, 2],
[3, 4],
[5, 6]
],
},
})
</script>
</body>
</html>
