vue中什么样的数据可以是在视图中显示

最新推荐文章于 2022-06-10 18:45:35 发布

转载最新推荐文章于 2022-06-10 18:45:35 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wuxianqiang/p/8386962.html

文章标签：

#javascript #ViewUI

本文介绍了在Vue中如何正确地添加动态属性，并对比了不同方式的效果。通过实例演示了直接赋值与使用Vue.$set的区别，同时强调了在data对象中初始化属性的重要性。

1. Vue中不可以添加不存在的属性，因为不存在的属性是没有getter和setter的。

    <div id="app">
        {{msg.a}}
        {{msg.b}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: {
                    a: 1
                }
            }
        })
        vm.msg.b = 2; //这样添加数据不会在视图中显示出来
    </script>

2. 关于如何添加一个动态属性我们可以使用Vue提供的方法：实例.$set(对象, 属性名, 属性值)；

    <div id="app">
        {{msg.a}}
        {{msg.b}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm= new Vue({
            el: "#app",
            data: {
                msg: {
                    a: 1
                }
            }
        })
        vm.$set(msg, "b", 2) // 使用Vue提供的$set设置动态数据
    </script>

3. 当然我们可以直接给对象赋予一个新值，新增也会有getter和setter方法

    <div id="app">
        {{msg.a}}
        {{msg.b}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm= new Vue({
            el: "#app",
            data: {
                msg: {
                    a: 1
                }
            }
        })
        vm.data = {a: 1, b: 2} // 赋予新值也可以添加动态数据
    </script>

提示：我们想要使用某个数据，最好还是在 data对象中初始化方便以后使用哦！

转载于:https://www.cnblogs.com/wuxianqiang/p/8386962.html