Question

我希望一个元素的高度与另一个元素的高度同步。第二个元素的内容随时间而变化。

此类代码的示例如下（并在JSFiddle中）：

＆＃13;

var vm = new Vue({
  el: "#root",
  data: {
    growingText: ''
  },
  watch: {
    growingText: function() {
      document.getElementById("square").style.height = document.getElementById("text").offsetHeight + 'px';
    }

  }
})

setInterval(
  function() {
    Vue.nextTick(function() {
      vm.growingText = vm.growingText + 'hello world ';
    })
  },
  500
)

＆＃13;

div[id="root"] {
  border-style: solid;
  border-width: 2px;
}
div[id="square"] {
  background-color: blue;
  color: white;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="root">
  <div id="square" :style="{height: h+'px'}">
    x
  </div>
  <div id="text">
    {{growingText}}
  </div>
</div>

＆＃13;

在该示例中可见，上部div（具有蓝色背景）的高度的变化随着下部div的高度的变化而偏离1。无论我是否使用Vue.nextTick()，行为都是一样的。

这是设计还是我可以更改某些内容以实现真正的同步？

注意：我不确定我使用＆＃34; tick＆＃34;是的，如果不是这样，请不要犹豫修改标题。

Answer 1

您应该使用requestAnimationFrame，以便在检索div尺寸时显示内容：https://jsfiddle.net/ncx2y0no/

requestAnimationFrame(() => {
  document.getElementById("square").style.height = document.getElementById("text").offsetHeight + 'px';
})

为什么vue.js中的手表关闭？

1 个答案: