Vue.js单向绑定和双向绑定实例分析

发布时间：2020-12-17 02:14:24 所属栏目：百科来源：网络整理

导读：本篇章节讲解Vue.js单向绑定和双向绑定。供大家参考研究具体如下： 1、单向绑定单向数据绑定的实现思路： ① 所有数据只有一份 ② 一旦数据变化，就去更新页面(只有 DOM，没有 data) ③ 若用户在页面上做了更新，就手动收集(双向绑定是自动收集)

本篇章节讲解Vue.js单向绑定和双向绑定。分享给大家供大家参考，具体如下：

1、单向绑定

单向数据绑定的实现思路：

①　所有数据只有一份

②　一旦数据变化，就去更新页面(只有DOM，没有data)

③　若用户在页面上做了更新，就手动收集(双向绑定是自动收集)，合并到原有的数据中。

2、双向绑定

数据的双向绑定是vue实现的一大功能。

使用v-model指令，实现视图和数据的双向绑定。

所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。

v-model主要用在表单的input输入框，完成视图和数据的双向绑定。

v-model只能用在、、这些表单元素上。

双向绑定的缺点：不知道watch来监听

希望本文所述对大家vue.js程序设计有所帮助。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!