Vue js动态显示/隐藏div答案

【问题标题】：Vue js dynamically show/hide divVue js动态显示/隐藏div
【发布时间】：2021-08-06 07:06:21
【问题描述】：

我有两个 div：

    <div class = "bigger">
    </div>

    <div class = "smaller">
    </div>

如果屏幕宽度

反之亦然。我可以通过以下方式触发调整大小事件：

    mounted() {
        window.addEventListener("resize", this.displayWindowSize)
    })

   },

    methods () {

        displayWindowSize(event) {
           if(document.documentElement.clientWidth > 710){
              //hide smaller div
              console.log("bigger");
           }else{
               //hide bigger div
               console.log("smaller");
           }
        }
    }

但我在互联网上找不到如何在 vuejs 中隐藏 div。

你们有想法吗？

编辑：我想触发这个函数来隐藏 div 每当屏幕宽度变化不止一次。

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

这取决于你是否想隐藏它删除它，如果你想删除你可以做类似的事情

methods () {
    isBigger() {
       return (document.documentElement.clientWidth > 710);
   }
}

和你的模板

<div v-if="isBigger" class="bigger">
</div>

<div v-else class="smaller">
</div>

或

<div v-show="isBigger()" class="bigger">
</div>

<div v-show="!isBigger()" class="smaller">
</div>

如果您想决定使用哪一个，请查看此问题 What is better in vue.js 2, use v-if or v-show?

【讨论】：

【解决方案2】：

感谢@top 快速回答的天才。你的解决方案对我不起作用，但我稍微改变了它：

                if(document.documentElement.clientWidth > 710){
                document.getElementsByClassName[0].style.display = "none";
                document.getElementsByClassName("bigger")[0].style.display = "block";
            }else{
                document.getElementsByClassName("smaller")[0].style.display = "block";
                document.getElementsByClassName("bigger")[0].style.display = "none";
            }

完美运行

【讨论】：

【解决方案3】：

这将是正确的方法。

methods () {

    displayWindowSize(event) {
       if(document.documentElement.clientWidth > 710){
          document.querySeletor(".smaller").style.display = "none"
          document.querySeletor(".bigger").style.display = "block"
          console.log("bigger");
       }else{
           document.querySeletor(".smaller").style.display = "block"
           document.querySeletor(".bigger").style.display = "none"
           console.log("smaller);
       }
    }
}

【讨论】：