vue的双向数据绑定

作者:分开不是尽头 | 创建时间: 2023-04-11
vue最大的特点之一就是双向数据绑定,可以通过v-model对数据进行双向数据绑定。请看下面案例。...
vue的双向数据绑定

操作方法

新建一个html代码页面。

创建一个div标签并设置id为app,然后在这个标签里面创建一个input文本框。 代码: <div id="app"> <input type="text"/> </div>

引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。

创建vue挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后创建vue的挂载点。 代码: <script> var app = new Vue({ el:"#app" }) </script>

设置数据。使用vue提供的data设置message数据为空。 代码: data:{ message:"" }

使用v-model进行数据双向绑定。在input标签上添加 v-model="message",然后在input标签后面添加{{message}}。 代码: <input type="text" v-model="message"/> {{message}}

保存html代码,然后使用浏览器打开,在input文本框上输入内容会发现文本框后面的数据会同步变更。

点击展开全文

更多推荐