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