如何显示和隐藏在 vue js 中动态创建的 div（多格式选项卡结构）

Posted 2023-02-23

【中文标题】如何显示和隐藏在 vue js 中动态创建的 div（多格式选项卡结构）

【英文标题】：How to show and hide divs (multiform tab structure) created dynamically in vue js

【发布时间】：2020-03-26 17:36:52

【问题描述】：

我正在尝试以编程方式使用 Vue.js 创建一个选项卡式结构。我认为它应该通过动态显示选定的 div 并隐藏其余部分来工作 还有其他有效的方法吗？

【问题讨论】：

vuejs.org/v2/guide/conditional.html

我可以有 100-1000 个 div 如何在所有这些中使用 v-if 或 v-else-if？

你当然可以有这么多，但很遗憾我们在你的问题中看不到任何内容

【参考方案1】：

您可以在 div 上使用 v-if 或 v-show，然后您可以让它接受一个评估动态数据的函数，如下所示：

<div v-for="item of items">
   <div v-if="shouldDisplay(item)">item</div>
</div>
...
methods: 
   shouldDisplay(item)
      if (item...) //fulfils some condition
           return true
        else 
       return false
    

根据@Phils 的建议，您还可以将数组创建为计算属性，过滤掉您需要的内容：

computed: 
   filteredArray()
     return items.filter(item => //some condition)
    

【讨论】：

从你的模板执行方法是非常低效的。见vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

@Phil 您在动态生成数据时别无选择，另一种选择是创建 100-1000 个计算属性也不是很高效。

或者只是一个返回过滤数组的计算属性

很大程度上依赖于数据结构，是可以做到的，我个人在模板迭代中放一个方法的时候从来没有发现有什么滞后。

我理解这个 shouldDisplay(item) 并且我的条件是 onclick，就像我们在 jquery 中做的那样如何在 vue 中做到这一点。

【参考方案2】：

我使用非常基本的 jquery 代码通过使用其唯一索引值调用函数并根据它们的 id 显示/隐藏它们来做到这一点：

   methods: 
        changeview(index)

            var id=Number(index)+Number(1);

            $( "#hotel"+id ).show();

            for( var i=0 ;i<this.location.length; i++)
                if(i!==id)

                    $( "#hotel"+i ).hide();
                
            
        ,