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>
    

      

  • 相关阅读:
    [leetcode] N-Queens
    [leetcode] Minimum Path Sum
    [leetcode] Longest Valid Parentheses
    习题9-1 时间换算
    long常量和long long常量
    整数占用空间
    来到地球多久啦
    习题8-10 输出学生成绩
    习题8-7 字符串排序
    习题8-9 分类统计各类字符个数
  • 原文地址:https://www.cnblogs.com/wjs521/p/9960170.html
Copyright © 2011-2022 走看看