码迷,mamicode.com
首页 > 其他好文 > 详细

vue 数据监听

时间:2019-12-19 22:55:24      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:sde   OLE   hid   splay   div   ons   htm   har   push   

技术图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <hr>
    {{hobby}}
    <hr>
    {{obj}}

    <button @click="my_click">点我改变数据</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "juyingying",
            hobby: ["抽烟", "喝酒", "烫头"],
            obj: {
                age: 32,
                face: null,
            }
        },
        methods: {
            my_click: function () {
                // 改变数据
                // this.name = "juying"
                // 改变数组的长度
                // 改变数组长度能够被监听到 新值和旧值相同
                // 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>
</body>
</html>
View Code

 

vue 数据监听

标签:sde   OLE   hid   splay   div   ons   htm   har   push   

原文地址:https://www.cnblogs.com/bozhengheng/p/12070606.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!