Vue 3 元素绑定值教程

在 Vue 3 中，我们经常需要将元素（例如 input、textarea 等）的值与数据进行绑定，从而实现表单交互和响应式更新。Vue 3 提供了几种常见方式来实现元素绑定。

1. 单向绑定 :value

在 Vue 3 中，可以使用 :value（或 v-bind:value）将数据绑定到表单元素的值上，实现单向绑定。

<template>
  <div>
    <input type="text" :value="searchValue" placeholder="请输入内容">
    <p>输入内容：{{ searchValue }}</p>
  </div>
</template>

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

const searchValue = ref('初始值')
</script>

说明：

• :value="searchValue" 只是把数据传给 input，用户修改输入框内容不会自动更新 searchValue。
• 如果想实现输入框内容与数据双向同步，需要使用 v-model。

2. 双向绑定 v-model

v-model 是 Vue 中最常用的双向绑定方式，能让输入框的值和数据保持同步。

<template>
  <div>
    <input type="text" v-model="searchValue" placeholder="请输入内容">
    <p>输入内容：{{ searchValue }}</p>
  </div>
</template>

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

const searchValue = ref('')
</script>

效果：

• 当用户在输入框中输入内容时，searchValue 会实时更新。
• 当 searchValue 被 JS 修改时，输入框的值也会随之更新。

3. 使用 @input 事件监听输入

如果你想在输入时做一些额外处理（如校验或格式化），可以监听 input 事件。

<template>
  <div>
    <input
      type="text"
      :value="searchValue"
      @input="onInput"
      placeholder="请输入内容"
    >
    <p>输入内容：{{ searchValue }}</p>
  </div>
</template>

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

const searchValue = ref('')

function onInput(event) {
  searchValue.value = event.target.value
}
</script>

说明：

• event.target.value 获取输入框最新值。
• 这种方式比 v-model 更灵活，可以加校验逻辑或格式化。

4. 修饰符的使用

Vue 3 提供一些常用修饰符，可以控制输入行为：

<input v-model.trim="searchValue" placeholder="自动去掉首尾空格">
<input v-model.number="numValue" type="number" placeholder="自动转数字">
<input v-model.lazy="searchValue" placeholder="失焦更新">

5. 总结

• :value：单向绑定，适合只显示数据。
• v-model：双向绑定，最常用的表单绑定方式。
• @input 事件：可实现自定义输入逻辑。
• 修饰符：简化常见操作，如去空格、转数字或延迟更新。