注：實例環境 vue cli構建的項目
app.vue
<template> <Example></Example> </template> <script> import Example from './components/Example' export default { name: 'App', components: { Example } } </script> <style> </style> Example.vue
<template> <div> <form @submit.prevent="onSubmit"> <label>用戶名:</label> <input type="text" v-model="username" placeholder="用戶名"/> <br> <label>密碼:</label> <input type="password" v-model="password" placeholder="密碼"/> <br> <label>性別:</label> <input type="radio" v-model="sex" value="男"/>男 <input type="radio" v-model="sex" value="女"/>女 <br> <label>興趣愛好:</label> <input type="checkbox" v-model="hobby" value="看書"/>看書 <input type="checkbox" v-model="hobby" value="運動"/>運動 <input type="checkbox" v-model="hobby" value="旅游"/>旅游 <br> <label>喜愛的顏色</label> <select v-model="color"> <option>紅色</option> <option>藍色</option> <option>黑色</option> </select> <br> <label>備注</label><br> <textarea v-model="message" placeholder="其他說明"></textarea> <br> <input type="submit" value="提交"/> </form> </div> </template> <script> export default { name: "Example", data:function () { return { username:'', password:'', sex:'', hobby:[], color:'', message:'' } }, methods:{ onSubmit:function () { alert("用戶名：" + this.username + ' 密碼：' + this.password + ' 性別：' + this.sex + ' 愛好:' + this.hobby + ' 顏色:' + this.color + ' 備注：' + this.message); } } } </script> <style scoped> </style> 瀏覽器顯示
