zoukankan      html  css  js  c++  java
  • 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);

  • 相关阅读:
    ubuntu下安装配置apache2(含虚拟主机配置)
    ubuntu安装软件包apt-get和dpkg方法
    python日期,时间函数
    python多线程
    截取utf8中文字符串
    python解析json
    sqlite读写
    lambda,map,filter,reduce
    pyinstaller生成exe可执行程序
    对象练习
  • 原文地址:https://www.cnblogs.com/chywx/p/9620417.html
Copyright © 2011-2022 走看看