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

相关阅读:
QT QToolBox控件使用详解
1236 - 二分查找
编译原理—运行环境、局部存储分配、活动记录、全局栈式存储分配、非局部名字的访问、参数传递
Scapy 解析 pcap 文件从HTTP流量中提取图片
[附源码]Python计算机毕业设计Django绿色生鲜
力扣 -- 873. 最长的斐波那契子序列的长度
Oracle数据库透明加密安当加密
CSRF攻击
西门子 S7-1200 与 BL200PN 通信示例
ubuntu20.04安装anaconda3搭建python环境

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