<!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；
總結
以上所述是小編給大家介紹的Vue表單綁定的實例代碼（單選按鈕,選擇框（單選時,多選時,用 v-for 渲染的動態選項）,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
