<!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 渲染的動態選項）,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
