Vue实现动态响应数据变化


Posted in Javascript onApril 28, 2017

Vue是MVVM模式,即Model-View-ViewModel,通过绑定数据即可以实时改变视图显示。

比如:使用v-blink动态绑定属性

<div v-blink:class="property"></div>

使用v-html来绑定带有标签的内容(会解析标签)

<div v-blink:class="property" v-html="content"></div>

使用v-text来绑定纯文本的内容(标签会以文本的形式输出)

<div v-blink:class="property" v-text="content"></div>

无论通过哪种形式绑定,都需要在Vue中的data中定义

var App = new Vue ({
 el: '#app',
 data: {
  property: '',
  content: '',
  example: [],
 }
 methods: {
 }
});

但是如果你需要在接来下的工作中使用到新的变量,或者你发现你改变已在data中定义的对象的值,但是视图却没有动态变化。可以通过以下方式解决:

Vuejs扩展了观察数组

1.使用$set

//等同于 App.example[0] = {name: 1}
App.example.$set(0, {name: 1});

2.使用全局Vue

Vue.set(example, 'name', 1);

通过这两种种方式都可以使视图更新

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
js 操作符汇总
Nov 08 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
input框中的name和id的区别
Nov 16 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
javascript触发模拟鼠标点击事件
Jun 26 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
解决浏览器会自动填充密码的问题
Apr 28 #Javascript
JS实现简单的天数计算器完整实例
Apr 28 #Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
js实现移动端编辑添加地址【模仿京东】
Apr 28 #Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 #Javascript
d3.js入门教程之数据绑定详解
Apr 28 #Javascript
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
You might like
谈谈关于php的优点与缺点
2013/04/11 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python对视频画框标记后保存的方法
2018/12/07 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server