让Vue.js同步隐藏和切换css类

Question

我有一个div，如下所示：

<div :class="classSwitch">
 Content of my div here
</div>

<div v-if="showImage" class="col-4">
  Another div here
</div>

我的Vue.js脚本如下：

new Vue({
    el: "#el",
    data: {
        classSwitch: "col-8",
        showImage: "true",
    },
    watch: {
        step() {
            if (this.step == 6) {
                this.showImage = false;
                this.classSwitch = "col-10";
            } else {
                this.classSwitch = "col-8";
                this.showImage = true;
            }
        },
    },
});

问题是col-4似乎有一个延迟，发生的是第一个div得到col-10类，然后把dom div推到底部，然后它消失了。它看起来很穷。尽管我专门构造了代码，去掉了第二个div，然后将第一个div放大为一个col-10。有人知道我如何解决这个问题吗？

Answer 1

我真的不明白你想做什么。但我会使用计算属性来代替。

computed: {
   classSwitch() {
      if (this.step == 6) {
          return "col-10";
      }
      return "col-8";
   },
   showImage() {
      if (this.step == 6) {
          return false;
      }
      return true;
   }
}

如果你使用上面的方法，你应该从数据对象中删除变量

Answer 2

另一种简单的方法是只有一个用于显示图像的计算属性和一个内联类绑定。数据段可以删除，因为它的变量没有被使用。

<div :class="{ 'col-10': step === 6, 'col-8': step !== 6}">
 Content of my div here
</div>
<div v-if="showImage" class="col-4">
  Another div here
</div>

computed: {
showImage() {
      if (this.step == 6) {
          return false;
      }
      return true;
   }
}