vue零散记录之computed

路小雨的雨web

于 2021-01-24 15:40:08 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 随笔文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/fang_java/article/details/112466265

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

随笔

10 篇文章

订阅专栏

本文介绍如何在Vue中使用计算属性监听图片尺寸变化，并将像素单位转化为rem，以实现响应式布局。计算属性`pxImgWhrem`和`pxImgHgrem`用于动态设置div的宽高，确保在图片尺寸更新时自动调整。

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

computed使用：后续如有深入学习，会完善文档。

computed:计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

computed计算

需求：监听到图片尺寸发生变化，修改外部div的宽高，且px需要转化为rem

 computed:{
      //图片宽度 图片高度 = px转化rem 
      pxImgWhrem:function(){
        return this.imgWh/100+'rem'
      },
      pxImgHgrem:function(){
        return this.imgHh/100+'rem'
      }
  },

<div class="top_imgwrap">
      <div class="" v-for="(image, index) in item.busiCode[0].adverList" :key="index" :style="{'width':pxImgWhrem,'height':pxImgHgrem}">
        <a :href="item.busiCode[0].ifhref=='1'?image.href:'javascript:;'">
          <img class="top_img" v-lazy="image.imgSrc">
        </a>
      </div>
    </div>