Vue监测添加的数据（一）

weixin_44689966

已于 2022-05-27 22:20:03 修改

阅读量154

点赞数

分类专栏： Vue 文章标签： vue.js

于 2022-04-29 10:42:19 首次发布

本文链接：https://blog.csdn.net/weixin_44689966/article/details/124490744

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

直接往数据源身上添加数据，添加的数据不会被监测

修改数据源中的数据（数据在data中），修改的数据会被vue检测到，并实时在页面展示

通过数据源本体改变的方式添加数据，添加的数据会被监测

可以复制到html文件中直接运行

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="id">
        <!-- num是被vue检测到的 -->
        {{num}}
        <button @click="num++">+1</button>
        <button @click="num--">-1</button>
        <hr>

        <!-- 点击按钮，直接往tableData这个数组中添加数据，添加的数据不会被检测到 -->
        {{data.item}}
        <button @click="addData">点击调用方法直接往data里面添加数据</button>
        <!-- 改变这个数据，查看是否会检测到改变 -->
        <button @click="data.item++">data.item+1</button>
        <hr>

        <!-- 点击按钮，点击调用方法修改dataHaveItem中的数据，修改的数据会被检测到 -->
        {{dataHaveItem.item}}
        <button @click="addDataHaveItem">点击调用方法修改dataHaveItem中的数据</button>
        <!-- 改变这个数据，查看是否会检测到改变 -->
        <button @click="dataHaveItem.item++">dataHaveItem.item+1</button>
        <hr>

        <!-- 点击按钮，间接往tableData这个数组中添加数据，添加的数据会被检测到 -->
        {{dataBy.itemBy}}
        <button @click="addDataBy">点击调用方法替换dataBy对象</button>
        <button @click="dataBy.itemBy++">dataBy.itemBy+1</button>
    </div>

</body>



<!-- import Vue before Element -->
<!-- 2.5.2 -->
<script src="https://cdn.staticfile.org/vue/2.5.2/vue.js"></script>

<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>

<script>
    new Vue({
        el: '#id',

        data() {
            return {
                // 表格中的使用的数据
                data: {},
                dataHaveItem: {
                    item: 0
                },
                dataBy: {},
                num: 0
            };
        },

        methods: {
            // 点击直接添加数据(不会被vue检测到)
            addData() {
                this.data.item = 1
            },

            // 点击添加数据（会被vue检测到）
            addDataHaveItem(){
                this.dataHaveItem.item = 1
            },

            // 点击间接添加数据(添加的数据会被vue检测到)
            addDataBy() {
                let obj = {}
                obj.itemBy = 1
                this.dataBy = obj
            }
        },

    })
</script>

</html>