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 相关文章推荐
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
Dedecms常用函数解析
2008/02/01 PHP
php 远程关机操作的代码
2008/12/05 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
django使用html模板减少代码代码解析
2017/12/12 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
商场中秋节活动方案
2014/02/07 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
三八节祝酒词
2015/08/11 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL