vue课程68 了解侦听器的用法

最新推荐文章于 2024-06-07 16:03:08 发布

前端歌谣

最新推荐文章于 2024-06-07 16:03:08 发布

阅读量312

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/qq_41632427/article/details/125596281

版权

歌谣-前端-vue2学习专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!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="username">
  </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: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal,oldVal) {
        
        
            console.log(newVal,oldVal)
         
        }
      }
    })
  </script>
</body>

</html>

运行结果