vue3.0 编写表单
时间: 2023-08-04 14:05:30 浏览: 49
在Vue3.0中编写表单有以下几个步骤:
1. 创建表单组件:
```javascript
<template>
<form>
<label>
Name:
<input type="text" v-model="name">
</label>
<label>
Email:
<input type="email" v-model="email">
</label>
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
email: ''
}
},
methods: {
submitForm() {
// 处理表单提交事件
}
}
}
</script>
```
2. 绑定表单输入值到组件的data属性中,使用`v-model`指令。
3. 在表单组件中添加提交事件处理函数`submitForm()`。
4. 在表单的`<form>`标签中添加`@submit`事件监听器,将其绑定到`submitForm()`事件处理函数。
```javascript
<template>
<form @submit.prevent="submitForm">
<label>
Name:
<input type="text" v-model="name">
</label>
<label>
Email:
<input type="email" v-model="email">
</label>
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
email: ''
}
},
methods: {
submitForm() {
// 处理表单提交事件
console.log('Name:', this.name);
console.log('Email:', this.email);
}
}
}
</script>
```
以上为一个最基本的表单组件。需要注意的是,在表单的`<form>`标签中,需要添加`@submit.prevent`事件修饰符,以防止浏览器默认提交表单的行为。同时,`<input>`标签的`type`属性需要根据实际情况设置。