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

我试图通过编程方式使用Vue.js创建一个选项卡式结构。我认为它应该通过动态显示所选div并隐藏其余部分来工作

---

还有其他有效的方法吗？

您可以在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
    }

---

我使用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();
                }
            }
        },}

方法：{
变更视图（索引）{
变量id=编号（索引）+编号（1）；
$（“#hotel”+id）.show（）；
对于（var i=0；iI可能有100-1000个div如何在所有div中使用v-if或v-else-if？您肯定有那么多，但遗憾的是，我们在您的问题中看不到任何div。从模板执行方法非常低效。请看@Phil动态生成数据时，您没有太多选择，另一个选项是创建100-1000个计算属性的性能也不是很好。或者只是一个返回过滤数组的计算属性在数据结构上花费了很多时间，这是可能的，就我个人而言，在将方法放入模板迭代中时，我从未发现任何滞后。我理解这应该显示（项）我的条件是onclick，就像我们在jquery中做的那样，如何在vue中做到这一点。
   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();
                }
            }
        },}