vue实现绑定输入参数

Vue 绑定输入参数的方法

在 Vue 中，可以通过 v-model 指令实现双向数据绑定，用于表单输入元素。以下是几种常见的绑定方式：

绑定普通输入框

使用 v-model 绑定到 data 中的属性：

<template>
  <input v-model="message" placeholder="请输入内容">
  <p>输入的内容是：{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

绑定复选框

对于单个复选框，绑定到布尔值：

<input type="checkbox" v-model="checked">
<p>{{ checked ? '选中' : '未选中' }}</p>

对于多个复选框，绑定到数组：

<input type="checkbox" value="A" v-model="checkedItems">
<input type="checkbox" value="B" v-model="checkedItems">
<p>选中的项：{{ checkedItems }}</p>

绑定单选按钮

<input type="radio" value="男" v-model="gender">
<input type="radio" value="女" v-model="gender">
<p>选择的性别：{{ gender }}</p>

绑定下拉选择框

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option value="A">选项A</option>
  <option value="B">选项B</option>
</select>
<p>选择的值：{{ selected }}</p>

修饰符

Vue 提供了一些有用的修饰符：

• .lazy - 在 change 事件而非 input 事件后同步
• .number - 自动将输入转为数字类型
• .trim - 自动去除首尾空格

<input v-model.lazy="message">
<input v-model.number="age" type="number">
<input v-model.trim="text">

自定义组件中使用 v-model

在自定义组件中实现双向绑定：

<custom-input v-model="searchText"></custom-input>

组件内部需要：

props: ['modelValue'],
emits: ['update:modelValue']

并在输入时触发更新：

this.$emit('update:modelValue', newValue)

绑定多个属性

使用 v-bind 和 v-on 实现多个属性的绑定：

<input
  :value="searchText"
  @input="searchText = $event.target.value"
>

这些方法覆盖了 Vue 中处理输入绑定的主要场景，可以根据具体需求选择合适的方式。