vue怎么实现input绑定
实现 Vue 中 input 绑定的方法
使用 v-model 指令实现双向绑定
v-model 是 Vue 提供的语法糖，用于实现表单元素与数据的双向绑定。它会根据输入框类型自动选取正确的方式更新数据。
<template>
<input v-model="message" placeholder="输入内容">
<p>输入的内容是: {{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>手动实现双向绑定（理解原理）
可以通过 v-bind 绑定 value 属性，再通过 v-on 监听 input 事件手动更新数据。
<template>
<input
:value="message"
@input="message = $event.target.value"
placeholder="手动绑定"
>
</template>处理修饰符
Vue 为 v-model 提供了多个修饰符来处理特定需求：
<!-- 输入时自动去除首尾空格 -->
<input v-model.trim="msg">
<!-- 将输入转为数字类型 -->
<input v-model.number="age" type="number">
<!-- 在 change 事件而非 input 事件后更新 -->
<input v-model.lazy="msg">自定义组件中的 v-model
在自定义组件中实现 v-model，需要定义 model 选项并处理相应事件：
<template>
<custom-input v-model="searchText"></custom-input>
</template>
<script>
// 子组件
export default {
props: ['value'],
model: {
prop: 'value',
event: 'input'
},
methods: {
updateValue(value) {
this.$emit('input', value)
}
}
}
</script>多选框绑定
对于多选框，v-model 会绑定到数组：
<input type="checkbox" v-model="checkedNames" value="Jack">
<input type="checkbox" v-model="checkedNames" value="John">
<p>选中的名字: {{ checkedNames }}</p>单选按钮绑定
单选按钮绑定到同一个变量即可实现互斥选择：
<input type="radio" v-model="picked" value="One">
<input type="radio" v-model="picked" value="Two">
<p>选择的值: {{ picked }}</p>下拉选择框绑定
select 元素绑定到变量会自动匹配 option 的 value：
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
</select>
<p>选择的值: {{ selected }}</p>
