vue实现动态设置元素的高度代码示例

本篇文章小编给大家分享一下vue实现动态设置元素的高度代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

1. 添加样式绑定

2. 添加属性计算

computed: {
    // 滚动区高度 
    scrollerHeight: function() {
      return (window.innerHeight - 50) + 'px'; //自定义高度需求
    }
  }

获取元素高度总是不准确的问题

后端代码很容易就写好，但是前端是真的难搞，遇到一个很严重的问题：

当发送一条消息或者是收到一条消息，消息展示界面不能滑到最下面，展示最新消息，于是，经过一段时间的修改，发送新消息时，滚动条虽然能下滑，但是滑不到最底部，于是添加了一个按钮，使用按钮，将滚动条滑到最底部是可行的。又使用debug调试，发现：vue会先执行你的其它方法，再渲染页面，导致总是只能滑到上一条消息展示的高度。

于是再百度，发现：重置数据后，获取dom元素高时，dom元素还未渲染完毕，（可能这就是为什么只能滑到上一条消息展示的地方）

解决办法

this.$nextTick()函数 ：在下次DOM更新循环结束之后执行延迟回调

this.$nextTick(()=>{ 
     this.goBottom(); // 滚动条滑到底部的方法
   })