1.單選框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view層,模板--> <div id="app"> 性別: <input type="radio" name="sex" value="男" v-model="mmm">男 <input type="radio" name="sex" value="女" v-model="mmm">女 <p> 選中了誰: {{mmm}} </p> </div> <!--1.導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> // 創建一個Vue實例 var vm = new Vue({ el:"#app", /*Model:數據*/ data:{ mmm:'' }, }); </script> </body> </html>
2.下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view層,模板--> <div id="app"> 下拉框: <select v-model="mmm"> <option disabled value="">--請選擇--</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>{{mmm}}</span> </div> <!--1.導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> // 創建一個Vue實例 var vm = new Vue({ el:"#app", /*Model:數據*/ data:{ mmm:'' }, }); </script> </body> </html>