Vue js动态显示/隐藏div

Posted 2023-02-23

【中文标题】Vue js动态显示/隐藏div

【英文标题】：Vue js dynamically show/hide 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 每当屏幕宽度变化不止一次。

【参考方案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);