vue3 ts怎么创建一个表单 显示目前的值 且可以修改提交
时间: 2024-10-15 10:07:10 浏览: 4
在Vue3中使用TypeScript创建一个表单,显示当前的值并允许修改和提交,可以按照以下步骤进行:
1. **创建表单组件**:首先,在`src/components`目录下创建一个名为`SimpleForm.vue`的新文件。在这个文件中,我们将构建一个基本的表单组件。
2. **模板部分**:在`<template>`标签中,定义表单的HTML结构。使用`v-model`指令将输入字段绑定到数据对象上,以便实现双向数据绑定。
```html
<template>
<div class="form-container">
<h2>简单表单</h2>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="name">名字:</label>
<input type="text" id="name" v-model="formData.name" required />
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="formData.email" required />
</div>
<div class="form-group">
<label for="message">信息:</label>
<textarea id="message" v-model="formData.message" required></textarea>
</div>
<button type="submit">提交</button>
</form>
<div v-if="submitted" class="result">
<h3>提交结果:</h3>
<p><strong>名字:</strong> {{ formData.name }}</p>
<p><strong>邮箱:</strong> {{ formData.email }}</p>
<p><strong>信息:</strong> {{ formData.message }}</p>
</div>
</div>
</template>
```
3. **脚本部分**:在`<script lang="ts">`标签中,导入Vue3相关的API,并编写组件的逻辑。
```typescript
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
export default defineComponent({
name: 'SimpleForm',
setup() {
const formData = reactive({
name: '',
email: '',
message: ''
});
const submitted = ref(false);
const handleSubmit = () => {
submitted.value = true;
console.log('表单数据:', formData);
};
return {
formData,
submitted,
handleSubmit
};
}
});
</script>
```
4. **样式部分**:在`<style scoped>`标签中,添加一些基本的样式以确保表单看起来更美观。
```css
<style scoped>
.form-container {
width: 300px;
margin: 0 auto;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input, textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
button {
padding: 0.5rem 1rem;
background-color: #42b983;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #369870;
}
.result {
margin-top: 2rem;
padding: 1rem;
border: 1px solid #ddd;
}
</style>
```
通过以上步骤,你就可以创建一个能够显示当前值、允许修改并且提交的表单了。这个表单使用了Vue3的`reactive`和`ref`特性来实现响应式数据绑定,并通过`v-model`指令实现双向数据绑定。当用户填写表单并点击提交按钮时,表单数据会被记录在控制台,并在页面下方显示提交的结果。
阅读全文