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 相关文章推荐
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
javascript 回调函数详解
Nov 11 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
javascript实现日历效果
Jun 17 Javascript
使用express来代理服务的方法
Jun 21 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
查看django版本的方法分享
2018/05/14 Python
python实现图书借阅系统
2019/02/20 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
运动会领导邀请函
2014/02/05 职场文书
一月红领巾广播稿
2014/02/11 职场文书
关于环保的建议书400字
2014/03/12 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
起诉状范本
2015/05/20 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
CAD实训总结范文
2015/08/03 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript