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开发随笔一 preventDefault的必要
Nov 25 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
javascript 用函数实现继承详解
May 28 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
解决浏览器会自动填充密码的问题
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
如何开始收听短波广播
2021/03/01 无线电
自动跳转中英文页面
2006/10/09 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
js时间控件只显示年月
2017/01/08 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
JS实现星星海特效
2019/12/24 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
在python中pandas的series合并方法
2018/11/12 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
小学节能减排倡议书
2014/05/15 职场文书
竞聘上岗演讲
2014/05/19 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
付款承诺函范文
2015/01/21 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
道士塔读书笔记
2015/06/30 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python