零基础学习Vue: 第3课 Vue动态属性变化关系

最新推荐文章于 2023-12-29 13:55:14 发布

舜岳

最新推荐文章于 2023-12-29 13:55:14 发布

阅读量250

点赞数

分类专栏： vue 文章标签： Vue动态属性 Vue属性变化 vue

本文链接：https://blog.csdn.net/qq_41614928/article/details/89293321

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

零基础学习Vue: 第3课 Vue动态属性变化关系

给Vue内对象直接设置属性：

vm.obj.long = '180';

用$set设置属性：

vm.$set(vm.obj,'sex','男');

检测以上两者的区别：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{obj}}</p>

  </div>

  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        obj:{
          name:"小明",
          age:18,
        }
      },
    })
    //一下两种方式给vue内对象添加属性的结果是不一样的
    vm.obj.long = '180';
    vm.$set(vm.obj,'sex','男');
  </script>

</body>
</html>

运行结果：

控制台动态模拟更改属性值后：

我们再来看看vm内的属性情况：

触发set改变后全部属性重新渲染：

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>vue</title>
	<style>
	</style>
  </head>
  <body>
    <div id="app">
	 <div>{{str}}</div>
	   <div>{{obj}}</div>
	   <button @click="fn1">点击添加obj</button>
	   <button @click="fn2">点击改变str</button>
	 </div>
		<!-- 官方vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

		    <script>
			let vm = new Vue({
				el: "#app",
				data: {
					str: '需要改变的str',
					obj: {aa: "111"},
				},
				methods:{
					fn1() {
						this.obj.bb = "222"
						console.log("obj:", this.obj)
					},
					fn2() {
						this.str = '改变后的str'
					}
				},

				watch: {
					'list': {
						'list.0'() {
							console.log("11122")
						}
					},
					'list.0': {
						handler() {
							console.log("变化了")
						},
						deep: true
					}
				}
			})

		</script>
	</body>

</html>