描述一下什么是Vue2中的v-model指令,并编写一个简单案例
时间: 2024-03-11 12:47:07 浏览: 121
浅谈 Vue v-model指令的实现原理
5星 · 资源好评率100%
Vue2中的v-model指令是一种双向绑定的指令,用于将表单元素的值绑定到Vue实例的数据中。v-model指令同时在表单元素的输入事件和Vue实例数据属性的改变事件之间建立了一个双向绑定关系,使得表单元素和Vue实例数据之间的变化可以互相同步。
以下是一个使用v-model指令的简单案例:
HTML代码:
```
<div id="app">
<input v-model="message" type="text">
<p>{{ message }}</p>
</div>
```
Vue实例代码:
```
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
```
在上面的代码中,我们使用v-model指令将input元素的值绑定到Vue实例的message属性上。每当input元素的值发生变化时,Vue实例的message属性也会相应地更新,反之亦然。同时,我们使用了{{ message }}语法来显示message属性的值,这样就可以看到input元素和message属性之间的双向绑定效果了。
当我们在输入框中输入一些文本时,下面的p标签也会实时更新显示相同的文本,说明双向绑定已经生效了。
阅读全文