当前位置：首页 > news >正文

Vue3 学习教程，从入门到精通， Vue 3 表单语法知识点及案例详解(19）

news 2025/8/2 16:29:58

Vue 3 表单语法知识点及案例详解

Vue 3 提供了强大的表单处理能力，通过 v-model 指令可以实现表单元素与组件数据的双向绑定。以下将详细介绍 Vue 3 表单相关的语法知识点，并提供一个包含详细注释的案例代码，帮助 Vue 3 初学者快速上手。

一、Vue 3 表单语法知识点

1. `v-model` 双向绑定

v-model 是 Vue 中用于实现表单元素与数据双向绑定的指令。它根据表单元素的类型自动选择合适的方式进行绑定。

文本输入 (input[type="text"], textarea): 绑定到 String 类型的数据。
复选框 (checkbox): 单个复选框绑定到 Boolean，多个复选框绑定到数组。
单选按钮 (radio): 绑定到选中的值。
选择框 (select): 单选绑定到选中的值，多选绑定到数组。

2. 表单元素与 `v-model` 的使用

2.1 文本输入

<input v-model="message" placeholder="编辑我" />
<p>消息是: {{ message }}</p>

2.2 多行文本

<textarea v-model="message" placeholder="多行文本"></textarea>
<p style="white-space: pre-line;">{{ message }}</p>

2.3 复选框

单个复选框

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

多个复选框

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<p>选中的名字: {{ checkedNames }}</p>

2.4 单选按钮

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<p>选中的值: {{ picked }}</p>

2.5 选择框

单选选择框

<select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option>
</select>
<span>选中的值: {{ selected }}</span>

多选选择框

<select v-model="selected" multiple><option>A</option><option>B</option><option>C</option>
</select>
<span>选中的值: {{ selected }}</span>

3. 表单修饰符

.lazy: 在 change 事件后同步数据，而不是在 input 事件后。
```
<input v-model.lazy="msg" />
```
.number: 自动将输入的字符串转为数字。
```
<input v-model.number="age" type="number" />
```
.trim: 自动去除输入内容的前后空白字符。
```
<input v-model.trim="username" />
```

4. 表单验证

Vue 3 本身不提供内置的表单验证功能，但可以通过以下几种方式实现：

使用计算属性: 通过计算属性来验证表单数据。
使用第三方库: 如 Vuelidate、VeeValidate 等。
自定义验证: 在方法中手动实现验证逻辑。

二、Vue 3 表单案例代码

以下是一个综合运用上述知识点的 Vue 3 表单案例，包含详细的注释说明。

<template><div id="app"><h2>Vue 3 表单示例</h2><!-- 1. 文本输入 --><div><label for="name">姓名:</label><input id="name" v-model="form.name" placeholder="请输入姓名" /><p>姓名: {{ form.name }}</p></div><!-- 2. 多行文本 --><div><label for="bio">个人简介:</label><textarea id="bio" v-model="form.bio" placeholder="请输入个人简介"></textarea><p>个人简介:</p><p style="white-space: pre-line;">{{ form.bio }}</p></div><!-- 3. 复选框 --><div><span>兴趣爱好:</span><div><input type="checkbox" id="hobby1" value="阅读" v-model="form.hobbies" /><label for="hobby1">阅读</label></div><div><input type="checkbox" id="hobby2" value="旅行" v-model="form.hobbies" /><label for="hobby2">旅行</label></div><div><input type="checkbox" id="hobby3" value="音乐" v-model="form.hobbies" /><label for="hobby3">音乐</label></div><p>选中的兴趣爱好: {{ form.hobbies }}</p></div><!-- 4. 单选按钮 --><div><span>性别:</span><div><input type="radio" id="male" value="男" v-model="form.gender" /><label for="male">男</label></div><div><input type="radio" id="female" value="女" v-model="form.gender" /><label for="female">女</label></div><p>选中的性别: {{ form.gender }}</p></div><!-- 5. 选择框 --><div><label for="education">学历:</label><select id="education" v-model="form.education"><option disabled value="">请选择学历</option><option>高中</option><option>本科</option><option>硕士</option><option>博士</option></select><p>选中的学历: {{ form.education }}</p></div><!-- 6. 多选选择框 --><div><label for="languages">掌握的语言:</label><select id="languages" v-model="form.languages" multiple><option>中文</option><option>英语</option><option>法语</option><option>德语</option></select><p>选中的语言: {{ form.languages }}</p></div><!-- 7. 表单提交 --><div><button @click="submitForm">提交</button></div></div>
</template><script>
export default {name: 'App',data() {return {form: {name: '',bio: '',hobbies: [],gender: '',education: '',languages: [],},};},methods: {submitForm() {// 表单验证示例if (!this.form.name) {alert('请输入姓名');return;}if (!this.form.gender) {alert('请选择性别');return;}if (!this.form.education) {alert('请选择学历');return;}// 提交表单数据console.log('提交的表单数据:', this.form);alert('表单提交成功！');},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;padding: 20px;
}div {margin-bottom: 20px;
}label {display: block;margin-bottom: 5px;
}input,
textarea,
select {width: 300px;padding: 8px;margin-bottom: 10px;
}button {padding: 10px 20px;background-color: #42b983;color: white;border: none;cursor: pointer;
}button:hover {background-color: #369c6b;
}
</style>

代码详解

模板部分 (template):
- 文本输入: 使用 v-model 绑定到 form.name，实现双向绑定。
- 多行文本: 使用 textarea 绑定到 form.bio，并在显示时使用 white-space: pre-line 保留换行。
- 复选框: 多个复选框绑定到 form.hobbies 数组，实现多选。
- 单选按钮: 单选按钮绑定到 form.gender，实现单选。
- 选择框: 单选选择框绑定到 form.education，多选选择框绑定到 form.languages 数组。
- 提交按钮: 点击按钮触发 submitForm 方法。
脚本部分 (script):
- 数据 (data): 定义 form 对象，包含表单的各项数据。
- 方法 (methods): submitForm 方法用于表单提交前的验证和提交后的处理。
  - 验证: 检查 name、gender 和 education 是否为空，若为空则提示用户。
  - 提交: 若验证通过，则在控制台输出表单数据，并弹出提示。
样式部分 (style):
- 简单的样式设置，使表单看起来更美观。

三、案例代码

<!-- App.vue  -->
<template><div id="app"><h2>Vue3 表单处理示例</h2><!-- 1. 文本输入 --><div class="form-section"><h3>文本输入 (input)</h3><input v-model="textInput" placeholder="请输入文本"><p>输入的文本: {{ textInput }}</p></div><!-- 2. 多行文本 --><div class="form-section"><h3>多行文本 (textarea)</h3><textarea v-model="textareaInput" placeholder="请输入多行文本"></textarea><p>输入的文本: {{ textareaInput }}</p></div><!-- 3. 单个复选框 --><div class="form-section"><h3>单个复选框 (checkbox)</h3><input type="checkbox" id="single-checkbox" v-model="isChecked"><label for="single-checkbox">我同意条款</label><p>复选框状态: {{ isChecked }}</p></div><!-- 4. 多个复选框 --><div class="form-section"><h3>多个复选框 (checkbox group)</h3><div><input type="checkbox" id="cb1" value="选项1" v-model="checkedOptions"><label for="cb1">选项1</label><input type="checkbox" id="cb2" value="选项2" v-model="checkedOptions"><label for="cb2">选项2</label><input type="checkbox" id="cb3" value="选项3" v-model="checkedOptions"><label for="cb3">选项3</label></div><p>选中的选项: {{ checkedOptions }}</p></div><!-- 5. 单选按钮 --><div class="form-section"><h3>单选按钮 (radio)</h3><div><input type="radio" id="radio1" value="A" v-model="radioChoice"><label for="radio1">A</label><input type="radio" id="radio2" value="B" v-model="radioChoice"><label for="radio2">B</label><input type="radio" id="radio3" value="C" v-model="radioChoice"><label for="radio3">C</label></div><p>选择的值: {{ radioChoice }}</p></div><!-- 6. 单选下拉框 --><div class="form-section"><h3>单选下拉框 (select)</h3><select v-model="selectedOption"><option disabled value="">请选择</option><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橙子</option></select><p>选择的水果: {{ selectedOption }}</p></div><!-- 7. 多选下拉框 --><div class="form-section"><h3>多选下拉框 (select multiple)</h3><select v-model="multiSelectedOptions" multiple><option value="red">红色</option><option value="green">绿色</option><option value="blue">蓝色</option></select><p>选择的颜色: {{ multiSelectedOptions }}</p></div><!-- 8. 使用修饰符 --><div class="form-section"><h3>使用修饰符</h3><p><label for="lazy-input">.lazy (失焦后更新):</label><input id="lazy-input" v-model.lazy="lazyText"> <span>值: {{ lazyText }}</span></p><p><label for="number-input">.number (转为数字):</label><input id="number-input" v-model.number="numberValue"  type="number"><span>值: {{ numberValue }} (类型: {{ typeof numberValue }})</span></p><p><label for="trim-input">.trim (去除首尾空格):</label><input id="trim-input" v-model.trim="trimmedText"> <span>值: "{{ trimmedText }}"</span></p></div><!-- 9. 表单提交 --><div class="form-section"><h3>表单提交</h3><form @submit.prevent="submitForm"> <input v-model="userName" placeholder="用户名" required><input v-model="userEmail" type="email" placeholder="邮箱" required><button type="submit">提交</button></form><div v-if="submittedData"><h4>提交的数据:</h4><pre>{{ submittedData }}</pre></div></div></div>
</template><script>
import { ref, reactive } from 'vue';export default {name: 'App',setup() {// 1. 文本输入const textInput = ref('');// 2. 多行文本 const textareaInput = ref('');// 3. 单个复选框const isChecked = ref(false);// 4. 多个复选框const checkedOptions = ref([]);// 5. 单选按钮const radioChoice = ref('');// 6. 单选下拉框const selectedOption = ref('');// 7. 多选下拉框const multiSelectedOptions = ref([]);// 8. 修饰符const lazyText = ref('');const numberValue = ref(null);const trimmedText = ref('');// 9. 表单提交 const userName = ref('');const userEmail = ref('');const submittedData = ref(null);// 表单提交处理函数const submitForm = () => {submittedData.value  = {name: userName.value, email: userEmail.value  };console.log(' 表单提交:', submittedData.value); // 这里可以添加实际的提交逻辑，例如调用 API};// 将所有响应式数据和方法暴露给模板return {textInput,textareaInput,isChecked,checkedOptions,radioChoice,selectedOption,multiSelectedOptions,lazyText,numberValue,trimmedText,userName,userEmail,submittedData,submitForm};}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}.form-section {margin-bottom: 30px;padding: 15px;border: 1px solid #ddd;border-radius: 5px;
}.form-section h3 {margin-top: 0;
}.form-section input, .form-section textarea, .form-section select {margin: 5px;padding: 5px;
}
</style>