Vue3 学习教程，从入门到精通，Vue 3 表单控件绑定详解与案例（7）-EW帮帮网

Vue 3 表单控件绑定详解与案例

在 Vue 3 中，表单控件的绑定是处理用户输入和交互的核心部分。本文将详细介绍如何在 Vue 3 中绑定各种表单控件，包括文本框、复选框、单选按钮和下拉菜单，并结合修饰符和 AIGC 辅助编程的案例，帮助您全面掌握 Vue 3 表单处理。

一、绑定文本框

1. 单行文本框

语法：

使用 v-model 指令进行双向数据绑定。

案例代码：

<!-- SingleLineText.vue -->
<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username" type="text" />
    <p>输入的用户名: {{ username }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

v-model="username"：将输入框的值与 username 状态进行双向绑定。
ref：使用 ref 定义响应式状态。
显示输入值：通过 {{ username }} 显示当前输入值。

2. 多行文本框

语法：

同样使用 v-model 进行双向绑定。

案例代码：

<!-- MultiLineText.vue -->
<template>
  <div>
    <label for="bio">个人简介:</label>
    <textarea id="bio" v-model="bio" rows="4" cols="50"></textarea>
    <p>个人简介:</p>
    <p>{{ bio }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const bio = ref('');
</script>

<style scoped>
label {
  display: block;
  margin-bottom: 5px;
}
</style>

详细注释：

v-model="bio"：将多行文本框的值与 bio 状态进行双向绑定。
rows 和 cols：设置文本区域的行数和列数。
显示输入值：通过 {{ bio }} 显示当前输入内容。

二、绑定复选框

1. 单个复选框

语法：

使用 v-model 绑定到一个布尔值。

案例代码：

<!-- SingleCheckbox.vue -->
<template>
  <div>
    <label for="subscribe">订阅新闻:</label>
    <input id="subscribe" v-model="subscribe" type="checkbox" />
    <p>订阅状态: {{ subscribe }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const subscribe = ref(false);
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

v-model="subscribe"：将复选框的状态与 subscribe 绑定，subscribe 为布尔值。
显示状态：通过 {{ subscribe }} 显示 true 或 false。

2. 多个复选框

语法：

绑定到一个数组，用于存储选中的值。

案例代码：

<!-- MultipleCheckboxes.vue -->
<template>
  <div>
    <label>
      <input type="checkbox" value="Vue" v-model="frameworks" /> Vue
    </label>
    <label>
      <input type="checkbox" value="React" v-model="frameworks" /> React
    </label>
    <label>
      <input type="checkbox" value="Angular" v-model="frameworks" /> Angular
    </label>
    <p>选中的框架: {{ frameworks }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const frameworks = ref([]);
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

v-model="frameworks"：将选中的值添加到 frameworks 数组中。
value：指定每个复选框对应的值。
显示选中值：通过 {{ frameworks }} 显示选中的框架列表。

三、绑定单选按钮

语法：

绑定到一个单一的值，用于选择其中一个选项。

案例代码：

<!-- RadioButtons.vue -->
<template>
  <div>
    <label>
      <input type="radio" value="male" v-model="gender" /> 男
    </label>
    <label>
      <input type="radio" value="female" v-model="gender" /> 女
    </label>
    <label>
      <input type="radio" value="other" v-model="gender" /> 其他
    </label>
    <p>性别: {{ gender }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const gender = ref('');
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

v-model="gender"：将选中的单选按钮的值绑定到 gender。
value：每个单选按钮的对应值。
显示选中值：通过 {{ gender }} 显示选中的性别。

四、绑定下拉菜单

1. 单选下拉菜单

语法：

使用 v-model 绑定到一个单一的值。

案例代码：

<!-- SingleSelect.vue -->
<template>
  <div>
    <label for="country">选择国家:</label>
    <select id="country" v-model="country">
      <option disabled value="">请选择</option>
      <option>中国</option>
      <option>美国</option>
      <option>英国</option>
    </select>
    <p>选中的国家: {{ country }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const country = ref('');
</script>

<style scoped>
label {
  margin-right: 10px;
}
select {
  margin-right: 10px;
}
</style>

详细注释：

v-model="country"：将选中的选项值绑定到 country。
默认选项：添加一个 disabled 的默认选项，提示用户选择。
显示选中值：通过 {{ country }} 显示选中的国家。

2. 多选下拉菜单

语法：

绑定到一个数组，用于存储选中的值。

案例代码：

<!-- MultipleSelect.vue -->
<template>
  <div>
    <label for="hobbies">选择爱好:</label>
    <select id="hobbies" v-model="hobbies" multiple>
      <option>阅读</option>
      <option>旅行</option>
      <option>运动</option>
      <option>音乐</option>
    </select>
    <p>选中的爱好: {{ hobbies }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const hobbies = ref([]);
</script>

<style scoped>
label {
  margin-right: 10px;
}
select {
  width: 200px;
  height: 150px;
}
</style>

详细注释：

v-model="hobbies"：将选中的选项值添加到 hobbies 数组中。
multiple：允许多选。
显示选中值：通过 {{ hobbies }} 显示选中的爱好列表。

五、值绑定

1. 单选按钮的值绑定

语法：

使用 v-model 绑定到一个对象属性。

案例代码：

<!-- ValueBindingRadio.vue -->
<template>
  <div>
    <label>
      <input type="radio" v-model="person.gender" value="male" /> 男
    </label>
    <label>
      <input type="radio" v-model="person.gender" value="female" /> 女
    </label>
    <p>性别: {{ person.gender }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const person = reactive({
  gender: '',
});
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

v-model="person.gender"：将选中的单选按钮的值绑定到 person.gender。
reactive：使用 reactive 定义响应式对象。

2. 复选框的值绑定

语法：

绑定到一个数组或对象属性。

案例代码：

<!-- ValueBindingCheckbox.vue -->
<template>
  <div>
    <label>
      <input type="checkbox" v-model="person.interests" value="reading" /> 阅读
    </label>
    <label>
      <input type="checkbox" v-model="person.interests" value="traveling" /> 旅行
    </label>
    <label>
      <input type="checkbox" v-model="person.interests" value="sports" /> 运动
    </label>
    <p>兴趣: {{ person.interests }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const person = reactive({
  interests: [],
});
</script>

<style scoped>
label {
  display: block;
  margin-bottom: 5px;
}
</style>

详细注释：

v-model="person.interests"：将选中的复选框的值添加到 person.interests 数组中。
reactive：使用 reactive 定义响应式对象。

3. 下拉菜单的值绑定

语法：

绑定到一个对象属性或数组。

案例代码：

<!-- ValueBindingSelect.vue -->
<template>
  <div>
    <label for="color">选择颜色:</label>
    <select id="color" v-model="color">
      <option disabled value="">请选择</option>
      <option value="red">红色</option>
      <option value="green">绿色</option>
      <option value="blue">蓝色</option>
    </select>
    <p>选中的颜色: {{ color }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const color = ref('');
</script>

<style scoped>
label {
  margin-right: 10px;
}
select {
  margin-right: 10px;
}
</style>

详细注释：

v-model="color"：将选中的下拉选项值绑定到 color。
显示选中值：通过 {{ color }} 显示选中的颜色。

六、使用修饰符

1. `.lazy`

说明： .lazy 修饰符使 v-model 在 change 事件触发时同步数据，而不是 input 事件。

案例代码：

<!-- LazyModifier.vue -->
<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model.lazy="username" type="text" />
    <p>输入的用户名: {{ username }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

.lazy：当输入框失去焦点或按下回车键时，username 状态才会更新。

2. `.number`

说明： .number 修饰符将输入的字符串转换为数字。

案例代码：

<!-- NumberModifier.vue -->
<template>
  <div>
    <label for="age">年龄:</label>
    <input id="age" v-model.number="age" type="number" />
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const age = ref(0);
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

.number：确保 age 状态为数字类型，而不是字符串。

3. `.trim`

说明： .trim 修饰符去除输入值两端的空白字符。

案例代码：

<!-- TrimModifier.vue -->
<template>
  <div>
    <label for="email">邮箱:</label>
    <input id="email" v-model.trim="email" type="email" />
    <p>邮箱: {{ email }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const email = ref('');
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

.trim：自动去除输入值两端的空白字符，确保邮箱格式正确。

七、AIGC 辅助编程——绑定输入框的值和下拉菜单

1. 绑定输入框的值

目标： 使用 AIGC 辅助编程，创建一个输入框并绑定其值。

案例代码：

<!-- AIGCInputBinding.vue -->
<template>
  <div>
    <label for="aiInput">AIGC 输入:</label>
    <input id="aiInput" v-model="aiInput" type="text" />
    <p>输入的内容: {{ aiInput }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 使用 AIGC 生成的代码
const aiInput = ref('');
</script>

<style scoped>
label {
  margin-right: 10px;
}
</style>

详细注释：

AIGC 生成的代码：假设 AIGC 生成的代码包含 aiInput 状态和输入框绑定。
v-model="aiInput"：绑定输入框的值到 aiInput 状态。

2. 绑定下拉菜单

目标： 使用 AIGC 辅助编程，创建一个下拉菜单并绑定其值。

案例代码：

<!-- AIGCSelectBinding.vue -->
<template>
  <div>
    <label for="aiSelect">AIGC 选择:</label>
    <select id="aiSelect" v-model="aiSelect">
      <option disabled value="">请选择</option>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
    </select>
    <p>选中的选项: {{ aiSelect }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 使用 AIGC 生成的代码
const aiSelect = ref('');
</script>

<style scoped>
label {
  margin-right: 10px;
}
select {
  margin-right: 10px;
}
</style>

详细注释：

AIGC 生成的代码：假设 AIGC 生成的代码包含 aiSelect 状态和下拉菜单绑定。
v-model="aiSelect"：绑定下拉菜单的选中值到 aiSelect 状态。

八、综合性案例

1. 综合表单绑定示例

目标： 结合文本框、复选框、单选按钮和下拉菜单，创建一个综合表单。

案例代码：

<!-- ComprehensiveForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="name">姓名:</label>
      <input id="name" v-model="form.name" type="text" />
    </div>
    <div>
      <label for="email">邮箱:</label>
      <input id="email" v-model.trim="form.email" type="email" />
    </div>
    <div>
      <label>性别:</label>
      <label>
        <input type="radio" v-model="form.gender" value="male" /> 男
      </label>
      <label>
        <input type="radio" v-model="form.gender" value="female" /> 女
      </label>
      <label>
        <input type="radio" v-model="form.gender" value="other" /> 其他
      </label>
    </div>
    <div>
      <label for="country">国家:</label>
      <select id="country" v-model="form.country">
        <option disabled value="">请选择</option>
        <option>中国</option>
        <option>美国</option>
        <option>英国</option>
      </select>
    </div>
    <div>
      <label>兴趣:</label>
      <label>
        <input type="checkbox" v-model="form.interests" value="reading" /> 阅读
      </label>
      <label>
        <input type="checkbox" v-model="form.interests" value="traveling" /> 旅行
      </label>
      <label>
        <input type="checkbox" v-model="form.interests" value="sports" /> 运动
      </label>
    </div>
    <button type="submit">提交</button>
  </form>
  <p>表单数据:</p>
  <pre>{{ form }}</pre>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  name: '',
  email: '',
  gender: '',
  country: '',
  interests: [],
});

const handleSubmit = () => {
  console.log('提交的表单数据:', form);
};
</script>

<style scoped>
form {
  max-width: 500px;
  margin: 0 auto;
}
div {
  margin-bottom: 10px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input,
select {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  padding: 10px 20px;
}
</style>

详细注释：

表单结构：包含文本框、邮箱输入框、单选按钮、下拉菜单和复选框。
v-model 绑定：所有表单控件均使用 v-model 进行双向绑定。
提交处理：点击提交按钮时，将表单数据输出到控制台。
样式：简单的样式使表单更美观。

2. 表单验证与提交

目标： 在综合表单基础上，添加表单验证和提交功能。

案例代码：

<!-- ValidatedForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="name">姓名:</label>
      <input id="name" v-model="form.name" type="text" />
      <span v-if="errors.name" class="error">{{ errors.name }}</span>
    </div>
    <div>
      <label for="email">邮箱:</label>
      <input id="email" v-model.trim="form.email" type="email" />
      <span v-if="errors.email" class="error">{{ errors.email }}</span>
    </div>
    <div>
      <label>性别:</label>
      <label>
        <input type="radio" v-model="form.gender" value="male" /> 男
      </label>
      <label>
        <input type="radio" v-model="form.gender" value="female" /> 女
      </label>
      <label>
        <input type="radio" v-model="form.gender" value="other" /> 其他
      </label>
    </div>
    <div>
      <label for="country">国家:</label>
      <select id="country" v-model="form.country">
        <option disabled value="">请选择</option>
        <option>中国</option>
        <option>美国</option>
        <option>英国</option>
      </select>
      <span v-if="errors.country" class="error">{{ errors.country }}</span>
    </div>
    <div>
      <label>兴趣:</label>
      <label>
        <input type="checkbox" v-model="form.interests" value="reading" /> 阅读
      </label>
      <label>
        <input type="checkbox" v-model="form.interests" value="traveling" /> 旅行
      </label>
      <label>
        <input type="checkbox" v-model="form.interests" value="sports" /> 运动
      </label>
    </div>
    <button type="submit">提交</button>
  </form>
  <p>表单数据:</p>
  <pre>{{ form }}</pre>
</template>

<script setup>
import { reactive, reactiveProp } from 'vue';

const form = reactive({
  name: '',
  email: '',
  gender: '',
  country: '',
  interests: [],
});

const errors = reactive({
  name: '',
  email: '',
  country: '',
});

const handleSubmit = () => {
  // 重置错误
  errors.name = '';
  errors.email = '';
  errors.country = '';

  if (form.name === '') {
    errors.name = '姓名不能为空';
  }

  if (form.email === '') {
    errors.email = '邮箱不能为空';
  } else if (!/^\S+@\S+\.\S+$/.test(form.email)) {
    errors.email = '邮箱格式不正确';
  }

  if (form.country === '') {
    errors.country = '请选择国家';
  }

  if (!errors.name && !errors.email && !errors.country) {
    console.log('提交的表单数据:', form);
  }
};
</script>

<style scoped>
.error {
  color: red;
  font-size: 0.9em;
}
form {
  max-width: 500px;
  margin: 0 auto;
}
div {
  margin-bottom: 10px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input,
select {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  padding: 10px 20px;
}
</style>

详细注释：

表单验证：在提交时进行简单的验证，检查姓名、邮箱和国家是否为空，以及邮箱格式是否正确。
错误提示：通过 errors 对象存储错误信息，并在对应字段下方显示。
提交处理：如果验证通过，打印表单数据到控制台。

九、总结

Vue 3 提供了强大的表单处理能力，通过 v-model 指令实现双向数据绑定，支持各种表单控件的绑定和修饰符的使用。本文详细介绍了 Vue 3 表单控件绑定的语法知识点、使用方法，并结合具体案例代码，帮助您全面掌握 Vue 3 表单处理。

通过掌握以下关键点，您可以有效地在 Vue 3 中处理表单：

文本框绑定：使用 v-model 绑定单行和多行文本框。
复选框绑定：单个和多个复选框的绑定。
单选按钮绑定：单个和多个单选按钮的绑定。
下拉菜单绑定：单选和多选下拉菜单的绑定。
值绑定：将表单控件的值绑定到对象属性或数组。
修饰符：使用 .lazy, .number, .trim 等修饰符优化数据处理。
表单验证：结合表单验证逻辑，提升用户体验。

Vue3 学习教程，从入门到精通，Vue 3 表单控件绑定详解与案例（7）

Vue 3 表单控件绑定详解与案例

一、绑定文本框

1. 单行文本框

2. 多行文本框

二、绑定复选框

1. 单个复选框

2. 多个复选框

三、绑定单选按钮

四、绑定下拉菜单

1. 单选下拉菜单

2. 多选下拉菜单

五、值绑定

1. 单选按钮的值绑定

2. 复选框的值绑定

3. 下拉菜单的值绑定

六、使用修饰符

1. `.lazy`

2. `.number`

3. `.trim`

七、AIGC 辅助编程——绑定输入框的值和下拉菜单

1. 绑定输入框的值

2. 绑定下拉菜单

八、综合性案例

1. 综合表单绑定示例

2. 表单验证与提交

九、总结

网站公告

今日签到

热门文章

最新发布

Vue3 学习教程，从入门到精通，Vue 3 表单控件绑定详解与案例（7）

Vue 3 表单控件绑定详解与案例

一、绑定文本框

1. 单行文本框

2. 多行文本框

二、绑定复选框

1. 单个复选框

2. 多个复选框

三、绑定单选按钮

四、绑定下拉菜单

1. 单选下拉菜单

2. 多选下拉菜单

五、值绑定

1. 单选按钮的值绑定

2. 复选框的值绑定

3. 下拉菜单的值绑定

六、使用修饰符

1. .lazy

2. .number

3. .trim

七、AIGC 辅助编程——绑定输入框的值和下拉菜单

1. 绑定输入框的值

2. 绑定下拉菜单

八、综合性案例

1. 综合表单绑定示例

2. 表单验证与提交

九、总结

网站公告

今日签到

热门文章

最新发布

1. `.lazy`

2. `.number`

3. `.trim`