vue数据立刻绑定到dom元素
今天遇到个令人发指的问题
使用vue修改一个数据之后，它不会立刻修改，而是在当前函数执行完毕之后才会进行渲染。
有个很简单的例子
<body>
<div id="app">
<div>{{a}}</div>
<div>{{b}}</div>
<div @click=ch()>点击改变值</div>
</div> <script>
var vm=new Vue({
el: '#app',
data: {
a: 1,
b: 2
},
methods:{
ch:function(){
this.a = 10;
//setTimeout(function(){
// vm.b = 20;
//},1500)
this.sleep(1500);
},
sleep:function(n){
var start = new Date().getTime();
while (true) {
if (new Date().getTime() - start > n) {
break;
}
}
vm.b=20;
}
}
})
</script>
</body>
并没有预期的效果。
因为自己写的sleep默认是一个同步函数罢了。
应该使用setTimeout
setTimeout属于异步执行函数，当程序执行完console.log(1,time1)后;遇到setTimeout会将该函数放入等待队列，等待当前主程序执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列
vue修改list数据。
var data = this.lists[this.index];
data.options[i].checked='right';
Vue.set(this.lists,this.index,data);
vue数据立刻绑定到dom元素的更多相关文章
- vue数据双向绑定的原理、虚拟dom的原理
vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- vue数据双向绑定原理
vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...
- vue数据双向绑定
Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
- Vue系列之 => ref获取DOM元素和组件
可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Vue数据双向绑定探究
前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...
随机推荐
- SQL基础操作
SQL是操作数据的语言 增加记录: insert into 数据表名称(字段1,字段2,字段3....)values(值1,值2,值3.....) 查看表结构:desc 表名 inset into x ...
- Vue.js和angular.js区别
Vue.js:易学 简单 指令以v.xxx 一片HTML代码配合json,在new出来Vue,js实例 个人维护项目 适用于移动端 应用超越了angular angular.js:上手难 指令以ng. ...
- SpringCloud（四）服务发现与消费：以ribbon为例
说明: ribbon是spring-cloud中作为服务消费者的一种角色,客户端可以通过它来对服务提供者的服务进行消费, 比如本例中是服务提供者注册到注册中心,服务提供者提供了一个服务接口,返回一个h ...
- JobEngine 基于quartz.net 跨平台作业框架
github:https://github.com/zzhi/JobEngine 基于quartz.net 的跨平台作业框架 quartz.net(https://github.com/quartzn ...
- Use JPath but not recursively loop a JObject to modify the values.
I am dealing with a Json file, I parsed it into jObject, I have another list which flattened the pro ...
- windows7下安装配置phonegap3.0 (cordavo)开发环境 (涉及android sdk配置)
之前在mac上安装调试过phonegap,现在公司用的是windows7,所以不得不再进行一次windows下的配置工作,顺便也写下来了 主要麻烦的地方是要在win7下添加好几个环境变量,这一块地方特 ...
- MongoDB之数据库命令操作(二)
现在详细学习一下mongodb的数据库操作. 查询语句 db.xxx(集合name).find() # 查询 db.xxx(集合name).findOne() # 只返回一个 db.xxx(集合nam ...
- Machine Learning系列--EM算法理解与推导
EM算法,全称Expectation Maximization Algorithm,译作最大期望化算法或期望最大算法,是机器学习十大算法之一,吴军博士在<数学之美>书中称其为“上帝视角”算 ...
- 在Linux上安装pycharm
1.首先在官网下载pycharm并进行提取,将提取的文件夹放在/usr下面(或者任意位置) 2.然后vi /etc/hosts 编辑 将0.0.0.0 account.jetbrains.com添加到 ...
- scrapy shell 用法（慢慢更新...）
scrapy shell 命令 1.scrapy shell url #url指你所需要爬的网址 2.有些网址数据的爬取需要user-agent,scrapy shell中可以直接添加头文件, 第①种 ...