写一个vue数据双向转换的案例
时间: 2023-03-21 10:01:08 浏览: 96
Vue.js 数据双向绑定的案例如下:1. 创建一个 Vue 实例,用来展示数据:
```
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
```2. 在 HTML 中绑定实例的数据:
```
<div id="app">
{{ message }}
</div>
```3. 输入框绑定实例的数据:
```
<div id="app">
<input type="text" v-model="message">
{{ message }}
</div>
```4. 修改框中的值,视图和数据实时同步:
```
<div id="app">
<input type="text" v-model="message">
{{ message }}
</div>
```现在,数据和视图之间实现了双向绑定,修改视图中的数据,实例中的数据也会同步更新,反之亦然。
阅读全文