vue中什么样的数据可以是在视图中显示
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对象中初始化方便以后使用哦!