改变DOM不能立即应用的问题及解决方法--this.$nextTick()

this.$nextTick()的使用

this.$nextTick()：在下次 DOM 更新结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

应用场景：在事件中修改DOM，直接修改不会立即应用，而是在下一次更新时才将修改的DOM应用，想要立即应用本次DOM修改后的数据，就要使用this.$nextTick()

methods: {
    //获取元素高度（改变DOM，需要立即应用修改后的数据）
    getHeight() {
      //this.height ： 内容展示区域的高度
      //window.innerHeight ： 窗口的文档显示区的高度
      //this.$refs.selectheight.offsetHeight ： 获取到元素的动态高度
      this.height = window.innerHeight - this.$refs.selectheight.offsetHeight + "px";
    },
    // 点击图标展示隐藏的信息
    iconshow() {
    	//this.isshow ： 改变DOM的触发条件
      if (this.isshow == false) {
        this.isshow = true;
        this.$nextTick(() => {
          this.getHeight();
        });
      } else {
        this.isshow = false;
        this.$nextTick(() => {
          this.getHeight();
        });
      }
    },
}