计算高度动态赋值

最新推荐文章于 2024-04-11 09:45:17 发布

The_Fuir_ye

最新推荐文章于 2024-04-11 09:45:17 发布

阅读量499

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/The_Fuir_ye/article/details/119533646

版权

本文介绍了如何在Vue.js应用中实现页面布局的动态高度计算。通过监听左侧内容区域的高度变化，实时更新右侧图片的高度，确保两侧保持一致。具体实现包括在data中声明imgHight变量，使用ref获取左侧元素，结合methods中的方法计算高度，并在mounted生命周期钩子中调用该方法。

摘要由CSDN通过智能技术生成

计算高度动态赋值

页面布局，分为左边和右边，右边为内容，右边为图片，要求右边图片的高度随着左边高度的变化而变化.

左边：

<ul class="tabNav" ref="leftList">
 <li v-for="(nav, index) in navs" :key="index" class="tabNav-item" @click="changeNav(index)">
    <div  :class="['tabNav-item-name',{ active: index == activeIndex}]">
      <!-- <nuxt-link :to="nav.to ||''" target="_blank"> -->
        <span>{
  {nav.name}}</span>
        <!-- <span class="img"><img v-if="nav.isNew" src="/new-index/11.png" alt=""></span> -->
      <!-- </nuxt-link> -->
    </div>
  </li>
&l