Vue选项之watch侦听器

最新推荐文章于 2025-05-20 23:23:48 发布

庚中

最新推荐文章于 2025-05-20 23:23:48 发布

阅读量990

点赞数 1

CC 4.0 BY-SA版权

分类专栏：十二.vue 文章标签： Vue选项之watch侦听器

本文链接：https://blog.youkuaiyun.com/xiaodi520520/article/details/88813384

本文深入探讨Vue的watch侦听器，通过案例展示如何监控数据变化，并介绍一种新颖的写法——使用实例属性进行watch监控，以提高代码灵活性。文章详细解释了两种实现方式及其效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

侦听器:在数据变化的监控经常使用.

一.看一个监控变化的案例

我们可以先看一个简单的数据变化监控的例子,例如天气预报的穿衣指数,它主要是根据温度来进行提示的,温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服,下面来看一下实现代码:

<body>
    <div id="app">
       <p>今日温度:{
   
   {
   
   deg}}℃</p> 
       <p>穿衣建议:{
   
   {
   
   clothes}}</p>
       <button @click="add">添加温度</button> <button @click="reduce">减少温度</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      

      let app = new Vue(