注：实例环境 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> 浏览器显示
