vue实现绑定输入参数

绑定输入参数的基本方法

在Vue中，可以使用v-model指令实现双向数据绑定，将输入元素的值与Vue实例的数据属性关联起来。这种方法适用于大多数表单输入元素。

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

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

修饰符的使用

Vue为v-model提供了多个修饰符，用于处理不同类型的输入需求。

.lazy修饰符将输入事件改为change事件触发

<input v-model.lazy="message">

.number修饰符自动将输入值转为数字类型

<input v-model.number="age" type="number">

.trim修饰符自动去除用户输入的首尾空格

<input v-model.trim="username">

自定义组件中的v-model

在自定义组件中实现v-model需要定义model选项和props。

子组件实现：

<template>
  <input 
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value']
}
</script>

父组件使用：

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

多个v-model绑定

Vue 2.x可以通过.sync修饰符实现多个prop的双向绑定，Vue 3.x可以直接使用多个v-model。

Vue 3.x示例：

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

计算属性绑定

对于需要处理或验证的输入，可以使用计算属性实现绑定。

<template>
  <input v-model="computedMessage">
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  computed: {
    computedMessage: {
      get() {
        return this.message
      },
      set(value) {
        this.message = value.toUpperCase()
      }
    }
  }
}
</script>

表单元素绑定

不同类型的表单元素绑定方式略有差异。

单选按钮：

<input type="radio" v-model="picked" value="one">

复选框：

<input type="checkbox" v-model="checked">

选择框：

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
</select>

响应式原理

Vue通过数据劫持结合发布-订阅模式实现响应式。使用Object.defineProperty(Vue 2.x)或Proxy(Vue 3.x)来追踪数据变化，当数据变化时自动更新DOM。