Vue v-model

Vue v-model

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

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

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

<input v-model="text">

核心作用是：

1. 数据到视图 (Data -> View)：将 Vue 实例中的数据渲染到表单元素（如 <input>、<textarea>、<select>）上。
2. 视图到数据 (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)) return
    data.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，让输入框恢复为空。

更多用法可以查看 vue 官网 API —— 表单输入绑定 | Vue.js