zoukankan      html  css  js  c++  java
  • Vue之数据监听存在的问题

    Vue之数据监听

    当数据监听的是列表时,数据发生改变,不会被监听到。

    // 用$set修改数组中的数组能够被监听
    // app.$set(this.hobby, 0, "爱你哦");

    <div id="app">
        {{name}}
        <hr>
        {{hobby}}
        <hr>
        {{obj}}
    
        <button @click="my_click">点我改变数据</button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                name: "wjs",
                hobby: ["抽烟", "喝酒", "烫头"],
                obj: {
                    age: 32,
                    face: null,
                }
            },
            methods: {
                my_click: function () {
                    // 改变数据
                    // this.name = "wjs0521"
                    // 改变数组的长度
                    // 改变数组长度能够被监听到 新值和旧值相同
                    // this.hobby.push("生活美滋滋");
                    // 改变数组中的值 不能被监听到 深度监听也不可以
                    // this.hobby[0] = "爱你哦";
                    // console.log(this.hobby);
                    // 用$set修改数组中的数组能够被监听
                    // app.$set(this.hobby, 0, "爱你哦");
    
                }
            },
            watch: {
                name: {
                    handler: function (val, oldVal) {
                        console.log(val);
                        console.log(oldVal)
                    }
                },
                hobby: {
                    handler: function (val, oldVal) {
                        console.log(val);
                        console.log(oldVal);
                    },
                    // deep: true  // 深度监听
                }
            }
        })
    </script>
    

      

  • 相关阅读:
    语言基础
    进制转换
    Java基础相关
    Java基础了解
    php 条件查询和多条件查询
    php 增删改查练习
    php 用封装类的方法操作数据库和批量删除
    php 用面向对象的方法对数据库增删改查
    php 面向对象的方式访问数据库
    OOP 7大原则
  • 原文地址:https://www.cnblogs.com/wjs521/p/9960170.html
Copyright © 2011-2022 走看看