vue课程71 deep选项


<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <div id="app">
    <input type="text" v-model="info.username">
    <input type="text" v-model="info.address.city">
  </div>
 
  <script src="./lib/vue-2.6.12.js"></script>
  <script src="./lib/jquery-v3.6.0.js"></script>
 
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户的信息对象
        info: {
          username: 'admin',
          address: {
            city: '北京'
          }
        }
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
         info: {
          handler(newVal) {
            console.log(newVal)
          },
          // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
          deep: true
        } 
        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        // 'info.username'(newVal) {
        //   console.log(newVal)
        // }
      }
    })
  </script>
</body>
 
</html>

直接给deep属性设置为true

相关阅读:
一种退避序列实现
linux操作sshd
英语学习（娱乐篇）
算法|图论 6 并查集
四川汇聚荣聚荣科技有限公司在市场评价好吗？
STM32 HAL WS2812B PWM+DMA控制
分布式运用之Filebeat+Kafka+ELK 的服务部署
【祝福伟大的祖国】Java Web 9 Request&Response 9.2.1 Request 继承体系
【华为OD机试】选修课【2023 B卷|100分】
产品经理的工作职责是什么？

原文地址：https://blog.csdn.net/qq_41632427/article/details/125596434