vue3的输入框数据双向绑定
时间: 2023-07-02 09:23:10 浏览: 46
Vue 3中的输入框数据双向绑定可以通过v-model指令实现,具体步骤如下:
1. 在模板中,使用v-model指令绑定数据属性和输入框:
```html
<template>
<div>
<input v-model="inputValue" />
<p>{{ inputValue }}</p>
</div>
</template>
```
2. 在组件中,定义数据属性inputValue,初始值为空字符串:
```js
<script>
export default {
data() {
return {
inputValue: ''
}
}
}
</script>
```
这样,当输入框的值改变时,数据属性inputValue的值也会自动更新。同时,当数据属性inputValue的值改变时,输入框的值也会自动更新。
需要注意的是,v-model实际上是一个语法糖,它会被扩展成一个value属性和一个input事件的绑定。因此,我们也可以手动绑定value和input事件来实现输入框数据双向绑定:
```html
<template>
<div>
<input :value="inputValue" @input="inputValue = $event.target.value" />
<p>{{ inputValue }}</p>
</div>
</template>
```
这段代码与前面使用v-model的代码功能是一样的,只是实现方式不同。