今日总结 vue watch + 计算属性 +map数组

最新推荐文章于 2024-03-29 16:04:37 发布

qq_38674970

最新推荐文章于 2024-03-29 16:04:37 发布

阅读量1k

点赞数

分类专栏： vue

33 篇文章

订阅专栏

本文详细介绍了Vue.js中watch监听器的使用方法，包括基本监听、深度监听及对象属性变化的监听技巧。同时，文章还讲解了计算属性的实现方式，展示了如何通过计算属性简化模板中的表达式，提高代码的可读性和可维护性。

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

// 之前一直不明白 watch 咋用原来这么简单，就是告诉看你改变的值是啥就行了

    data(){
      return{
        message:10,
        borlen:true,
        abc:1,
      }
    },

//就是比如data里有个borlen值你要监听他

    watch:{
      borlen(){
        console.log("改变值啦");
        // return this.borlen;
      },
    }

// 直接监听就好了我去那个borlen就是你要监听的值啊不是命名方法啊

   data(){
      return{
        message:10,
        borlen:true,
        abc:1,
        data:{
          data:100
        }
      }
    },

//万一是个对象里的怎么监听呢那就要用深度监听了

      data:{//深度监听，可监听到对象、数组的变化
        handler(val, oldVal){
          console.log("深度监听");
        },
        deep:true     //这个要开起来
      }

//深度监听

   data(){
      return{
        message:10,
        borlen:true,
        abc:1,
        data:{
          data:100
        }
      }
    },

// 计算属性也很简单比如上面的书我要用到message和abc

   computed:{
      multiplication() {
        return this.abc*this.message
      }
    },

//这个时候我们就可以用multiplication啦他会自动计算的啦

     <div>{{multiplication}}</div>

//直接调用就行了啊

map数组

 var data = MoreProwerDel.map(function (MoreProwerDel) { return MoreProwerDel.Id; });
// ba MoreProwerDel的数据里的值 直接拿出来