<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue表單綁定（單選按鈕，選擇框（單選時，多選時）</title>
</head>
<body>
<!-- 單選按鈕 -->
<div id="app">
<input type="radio" value="選擇1" v-model="radio"/>
<label>選擇1</label>
<input type="radio" value="選擇2" v-model="radio"/>
<label>選擇2</label>
<p>所選擇：{{radio}}</p>
</div>
<!-- 選擇框（單選時） -->
<div id="app1">
<select v-model="select">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>所選擇：{{select}}</p>
</div>
<!-- 用 v-for 渲染的動態選項 -->
<div id="app2">
<select v-model="select">
<option v-for="item in list" v-bind:value="item.id">{{item.name}}</option>
</select>
<p>所選擇：{{select}}</p>
</div>
<script src="vue.js"></script>
<script>
//單選按鈕
var app=new Vue({
el:"#app",
data:{
radio:"選擇1"
}
});
//選擇框(單選時)
var app=new Vue({
el:"#app1",
data:{
select:""
}
});
//用 v-for 渲染的動態選項
var app2 = new Vue({
el: "#app2",
data: {
select: '1',
list: [{
id: 1,
name: 'A'
},
{
id: 2,
name: 'B'
},
{
id: 3,
name: 'C'
}
],
}
})
</script>
</body>
</html>
選擇框（多選時）：只需要把select:[] 即可,並且添加multiple；