用vue生成一个输入表单
时间: 2023-08-04 13:28:11 浏览: 54
好的,以下是一个简单的 Vue 输入表单示例:
```
<template>
<div>
<form>
<label for="name">Name:</label>
<input type="text" id="name" v-model="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" v-model="email">
<br>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
<br>
<button type="submit" @click.prevent="submitForm">Submit</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
password: ''
}
},
methods: {
submitForm() {
// 在这里可以处理表单提交的逻辑
console.log('Name:', this.name)
console.log('Email:', this.email)
console.log('Password:', this.password)
}
}
}
</script>
```
这个表单包含了三个输入项:Name, Email 和 Password。使用 `v-model` 指令将每个输入项与 Vue 实例中定义的属性绑定起来,当输入框中的值发生变化时,Vue 会自动更新实例中对应的属性值。`@click.prevent="submitForm"` 监听表单提交事件,并且调用 `submitForm` 方法处理表单提交的逻辑。