Vue3的v-model说明和使用方法
Vue 3 的 v-model 是一个语法糖，它为表单输入和应用状态之间创建了双向绑定。这样，当用户在表单中输入时，数据会自动更新，反之亦然。
说明
在 Vue 3 中，v-model 实际上是基于 value 属性和 input 事件实现的。这意味着你可以使用 v-model 来监听 input 事件，并且当输入变化时，v-model 会自动更新数据。
使用方法
在表单元素上使用 v-model：
html<template>
<input v-model="message" />
</template><script>
export default {
data() {
return {
message: ''
}
}
}
</script>代码示例
文本输入框：
<template>
<div>
<input v-model="message" placeholder="输入文本" />
<p>你输入的文本是: {{ message }}</p>
</div>
</template><script>
export default {
data() {
return {
message: ''
}
}
}
</script>复选框：
对于复选框，你可以使用数组来绑定多个选项。当用户选择或取消选择一个选项时，数组会自动更新。
<template>
<div>
<input type="checkbox" v-model="checkedList" value="选项1" /> 选项1<br />
<input type="checkbox" v-model="checkedList" value="选项2" /> 选项2<br />
<ul>
<li v-for="item in checkedList" :key="item">{{ item }}</li>
</ul>
</div>
</template><script>
export default {
data() {
return {
checkedList: []
}
}
}
</script>选择框：
对于选择框，你可以使用对象或数组来绑定多个选项。当用户选择或取消选择一个选项时，对象或数组会自动更新。
使用对象：
<template>
<div>
<select v-model="selectedOption">
<option v-for="option in options" :key="option.value" :value="option.value">
{{ option.text }} - {{ option.value }}元
</option>
</select>
<p>你选择的选项是: {{ selectedOption }}</p>
</div>
</template><script>
export default {
data() {
return {
options: [
{ text: '选项1', value: '1' },
{ text: '选项2', value: '2' },
{ text: '选项3', value: '3' }
],
selectedOption: ''
}
}
}
</script>