点击第一次不出现div，点击第二次才出现？

Question

如上图，我点击右上角的圆，下面四个圆出现，但问题时我第一次点击不起作用，要点第二下才会出现，是什么原因？

<div class="main_top">
      <div class="top_img1" @click="appear()"></div>

      <div id="eject1"></div>
      <div id="eject2"></div>
      <div id="eject3"></div>
      <div id="eject4"></div>
    </div>

appear() {
      let eject1 = document.getElementById("eject1");
      let eject2 = document.getElementById("eject2");
      let eject3 = document.getElementById("eject3");
      let eject4 = document.getElementById("eject4");
      if (eject1.style.display == "none" && eject2.style.display == "none" &&
        eject3.style.display == "none" && eject4.style.display == "none"
      ) {
        eject1.style.display = "block";
        eject2.style.display = "block";
        eject3.style.display = "block";
        eject4.style.display = "block";
      } else {
        eject1.style.display = "none";
        eject2.style.display = "none";
        eject3.style.display = "none";
        eject4.style.display = "none";
      }
    },

Answer 1

不要在vue里面过度依赖jquery或者直接性的操作Dom

---

下面是合理写法

<template>
    <div class="main_top">
      <div class="top_img1" @click="appear()"></div>

      <div v-show="showEject" id="eject1"></div>
      <div v-show="showEject" id="eject2"></div>
      <div v-show="showEject" id="eject3"></div>
      <div v-show="showEject" id="eject4"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showEject: true
        }
    },
    methods: {
        appear() {
            this.showEject = !this.showEject
        }
    }
}
</script>

Answer 2

                appear() {
                    let eject1 = document.getElementById("eject1");
                    let eject2 = document.getElementById("eject2");
                    let eject3 = document.getElementById("eject3");
                    let eject4 = document.getElementById("eject4");
                    if (
                        getComputedStyle(eject1).getPropertyValue("display") == "none" &&
                        getComputedStyle(eject2).getPropertyValue("display") == "none" &&
                        getComputedStyle(eject3).getPropertyValue("display") == "none" &&
                        getComputedStyle(eject4).getPropertyValue("display") == "none"
                    ) {
                        getComputedStyle(eject1).getPropertyValue("display") = "block";
                        getComputedStyle(eject2).getPropertyValue("display") = "block";
                        getComputedStyle(eject3).getPropertyValue("display") = "block";
                        getComputedStyle(eject4).getPropertyValue("display") = "block";
                    } else {
                        getComputedStyle(eject1).getPropertyValue("display") = "none";
                        getComputedStyle(eject2).getPropertyValue("display") = "none";
                        getComputedStyle(eject3).getPropertyValue("display") = "none";
                        getComputedStyle(eject4).getPropertyValue("display") = "none";
                    }
                },

Answer 3

不建议去手动更改DOM

示例代码：在线预览

<template>
  <div class="main_top">
    <button class="top_img1" @click="appear()">点击</button>

    <div v-show="showEject" id="eject1"></div>
    <div v-show="showEject" id="eject2"></div>
    <div v-show="showEject" id="eject3"></div>
    <div v-show="showEject" id="eject4"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showEject: true,
    };
  },
  methods: {
    appear() {
      this.showEject = !this.showEject;
    },
  },
};
</script>

<style>
#eject1,
#eject2,
#eject3,
#eject4 {
  width: 100px;
  height: 80px;
  margin: 20px;
  background-color: #000;
}
</style>