vue中调整某一div的滚动条始终触底

       举一个比较长见的例子，在聊天框中，每一条消息都是一个组件，通过在父组件中根据数据v-for循环出来该组件，接收到消息之后也能快速渲染出来，这是很方便的方法。
       但是要注意的一点是，每次该div里添加一条新的消息之后右边的滚动条应该是立马触底的，也就是显示最新的一条消息，因为消息一般都是添加在一个集合的末尾，当然也就是最后渲染，位置在div的最下端，而不是每次收到新的消息之后，自己还要手动去调整滚动条拉到最下端。
       那么，如何实现vue中调整某一div的滚动条始终触底呢？
       首先，使某一div拥有纵向滚动条很简单：

overflow-y: scroll;

       这个样式可以使一个div中的元素高度超出父级元素时隐藏，并通过右侧滚动条来滑动浏览隐藏部分。
       之后，咱们需要调整的该div的scrollTop来调整该滚动条的位置。这个样式指滚动条距离顶部的数值，一开始在最顶端时为0，自然当达到某一数值时便可使滚动条触底，当时当该值趋于无穷大时，虽然可能滚动条并没有滑动这么长的距离，但也依然以触底计算，所以，当你并不去详细计算滚动条的距离时，只是想触底，可以将其设置的非常大，例如：

scrollTop=9999999999

       这样浏览器对滚动条是默认触底处理的。所以将事件方法最后使div得scrollTop=9999999999，就可以将滚动条始终触底。
       那么问题来了，在vue得methods中如何获取某一div呢？在原生js中大家知道可以document里得getElementById，但是vue里也有更方便得方法获取某一div。就是ref属性。例如：

<div id="chat" ref="chatbox"></div>

       当给一个元素添加了ref属性之后，在方法里就可以通过：

this.$refs.chatbox     //chatbox为上述ref的值

       来获取到该id，这时便可通过

this.$refs.chatbox.scrollTop = 999999999

       来修改该div的滚动条位置，达到触底的效果。
       但是这里要注意，当新数据添加到集合中时，vue渲染是需要时间的，以上述聊天框举例，当添加一条新数据时，vue渲染需要时间，如果直接设置滚动条触底，可能会导致最新的数据仍然隐藏，滚动条在快接近底端的地方。所以建议将这个代码放到计时器里（setTimeout）,大概延迟10ms就可以了。