Vue v-model

news/2025/11/28 11:25:08/文章来源:https://www.cnblogs.com/Jing61/p/19281443

Vue v-model

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦

<input:value="text"@input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤：

<input v-model="text">

核心作用是：

数据到视图 (Data -> View)：将 Vue 实例中的数据渲染到表单元素（如 <input>、<textarea>、<select>）上。
视图到数据 (View -> Data)：当用户修改表单元素的值时，自动更新 Vue 实例中对应的数据。

另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
<select> 会绑定 value property 并侦听 change 事件。

注意

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用响应式系统的 API 来声明该初始值。

根据示例，查看 v-model 用法

<template><div><input placeholder="请输入汽车品牌" v-model="data.brand" /><button @click='add'>添加品牌</button><ul><li v-for="item in data.brands">{{ item }}</li></ul></div>
</template><style scoped></style><script setup>
import { ref } from 'vue'const data = ref({brand: '',brands: [],
})function add() {// 添加品牌，判断是否输入空if ((!data.value.brand)) returndata.value.brands.push(data.value.brand)data.value.brand = ''
}
</script>

输入两次 benz，并点击添加品牌

代码解析：

<input>：通过 v-model 绑定 data.brand，实现输入内容与数据的双向同步。
<button>：点击事件绑定 add 方法，触发添加逻辑。
<ul>：通过 v-for 遍历 data.brands 数组，将每个品牌渲染为 <li> 列表项。
ref：用于创建响应式数据。因为这里是对象类型，所以访问内部属性需要用 .value（如 data.value.brand）。
add 方法：先判断输入是否为空，避免添加空字符串。将 data.brand 的值推入 data.brands 数组，实现品牌添加。最后清空 data.brand，让输入框恢复为空。