v-model 是 Vue.js 中一个非常重要的指令，它用于创建数据与视图之间的双向绑定。在表单元素（如 input, textarea, select）上创建双向绑定，可以实现状态的自动同步。
在使用 v-model 时，它会根据表单元素类型自动选取正确的方法来更新元素的值。
以下是一些使用 v-model 的示例：
- 在输入框中使用
v-model 创建双向数据绑定：
<template>
<div>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
在这个例子中，输入框的值与数据 message 双向绑定，所以无论 message 如何变化，输入框的值都会更新，反之亦然。
- 在复选框中使用
v-model 创建绑定：
<template>
<div>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
</template>
<script>
export default {
data() {
return {
checked: false
}
}
}
</script>
在这个例子中，复选框的选中状态与数据 checked 双向绑定。
- 在选择列表中使用
v-model 创建绑定：
<template>
<div>
<select v-model="selected">
<option disabled value="">请选择一个选项</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>选中的是: {{ selected }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: ''
}
}
}
</script>
在这个例子中，选择列表的选中项与数据 selected 双向绑定。
在自定义组件上使用 v-model，你需要在子组件中使用 model 选项来定义如何通过 prop 和事件实现数据的双向绑定。
例如：
<template>
<div>
<custom-input v-model="message"></custom-input>
<p>Message is: {{ message }}</p>
</div>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput
},
data() {
return {
message: ''
}
}
}
</script>
在自定义输入组件 CustomInput.vue 中：
<template>
<input :value="value" @input="$emit('update:value', $event.target.value)">
</template>
<script>
export default {
model: {
prop: 'value',
event: 'update:value'
},
props: {
value: String
}
}
</script>
在这个例子中，CustomInput 组件通过 v-model 接收一个名为 value 的 prop，并且当输入框的值发生变化时，它会发出一个自定义的 update:value 事件，将新的值作为参数。
这样，无论 message 如何变化，CustomInput 组件