如何在vue.js中按条件打开和关闭标记？

我想用vue.js在一个引导行中渲染3个视频。 我需要打开

并关闭此标签（每3个视频一个），以便将它们包装在里面。 我不知道用vueJS怎么做

html代码：

 <div class="container" id="video-list">
        <div v-for="(item, index) in items"><!--how to open this tag only if index%3==0?-->
            <div class="row">
                <div class="col-md-4 col-sm-4 ">
                    <h3>{{item}} {{index}}</h3>
                    <video class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls
                           preload="auto" width="640" height="264" poster="video-poster.png"
                           data-setup="{}">
                        <source :src="'video/' + item" type='video/mp4'>
                    </video>
                </div>
            </div> <!--how to close this tag only if index%3==0?-->
        </div>
    </div>

我看到了，但是当我把它应用到这个div

class=“row”

时，它隐藏了包含视频的子标签

---

在我的例子中，我不想管理标记呈现，我需要能够有条件地打开/关闭标记元素。

您可以将项目处理为矩阵并迭代到其中

var视频=新的Vue({
el:'视频列表'，
数据：函数（）{
var项目=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]；
var行=[]；
而（items.length>0）{
行.推（项.拼接（0,3））；
}
返回{
行：行
};
}
});

{{col+”（“+j+”“+i+”）}
您可以将项目处理为矩阵，然后迭代到矩阵中


var视频=新的Vue({
el:'视频列表'，
数据：函数（）{
var项目=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]；
var行=[]；
而（items.length>0）{
行.推（项.拼接（0,3））；
}
返回{
行：行
};
}
});

{{col+”（“+j+”“+i+”）}
很遗憾，你不能这样做。您需要制作如下内容：

<div class="container" id="video-list">
  <div v-for="(item, index) in items">

    <!--how to open this tag only if index%3==0?-->
    <div class="row" v-if="index % 3 === 0">
      <div class="col-md-4 col-sm-4 ">
        <h3>{{item}} {{index}}</h3>
        <video class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="video-poster.png" data-setup="{}">
          <source :src="'video/' + item" type='video/mp4'>
        </video>
      </div>
    </div>
    <!--how to close this tag only if index%3==0?-->

      <!-- Notice, here you don't have the row anymore -->
      <div class="col-md-4 col-sm-4 " v-else>
        <h3>{{item}} {{index}}</h3>
        <video class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="video-poster.png" data-setup="{}">
          <source :src="'video/' + item" type='video/mp4'>
        </video>
      </div> 
  </div>
</div>


{{item}}{{index}}
{{item}}{{index}}

也许您将创建一个小组件，以避免在行中复制代码。
不幸的是，您不能这样做。您需要制作如下内容：

<div class="container" id="video-list">
  <div v-for="(item, index) in items">

    <!--how to open this tag only if index%3==0?-->
    <div class="row" v-if="index % 3 === 0">
      <div class="col-md-4 col-sm-4 ">
        <h3>{{item}} {{index}}</h3>
        <video class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="video-poster.png" data-setup="{}">
          <source :src="'video/' + item" type='video/mp4'>
        </video>
      </div>
    </div>
    <!--how to close this tag only if index%3==0?-->

      <!-- Notice, here you don't have the row anymore -->
      <div class="col-md-4 col-sm-4 " v-else>
        <h3>{{item}} {{index}}</h3>
        <video class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="video-poster.png" data-setup="{}">
          <source :src="'video/' + item" type='video/mp4'>
        </video>
      </div> 
  </div>
</div>


{{item}}{{index}}
{{item}}{{index}}

也许您将创建一个小组件，以避免在行中复制代码。
因此，我使用它来实现您需要的行为，下面是示例：


//https://stackoverflow.com/a/10456644/4738332
Object.defineProperty（Array.prototype，'chunk'，{value:function（n）{
返回Array.from（Array（Math.ceil（this.length/n）），（u，i）=>this.slice（i*n，i*n+n））；
}});
Vue.组件（“应用程序行”{
道具：['items']，
模板：`
{{item}}
`
})
新Vue({
el:“应用程序”，
数据：{
项目：[1,2,3,4,5,6,7,8,9,10]
},
计算：{
getRowsItems（）{
返回此.items.chunk（3）
}
}
})
.row{
背景颜色：绿色；
利润率：20px；
填充：10px；
}
.项目{
背景颜色：蓝色；
保证金：4倍；
颜色：白色；
}

下面是，我使用它来实现您需要的行为，下面是示例：


//https://stackoverflow.com/a/10456644/4738332
Object.defineProperty（Array.prototype，'chunk'，{value:function（n）{
返回Array.from（Array（Math.ceil（this.length/n）），（u，i）=>this.slice（i*n，i*n+n））；
}});
Vue.组件（“应用程序行”{
道具：['items']，
模板：`
{{item}}
`
})
新Vue({
el:“应用程序”，
数据：{
项目：[1,2,3,4,5,6,7,8,9,10]
},
计算：{
getRowsItems（）{
返回此.items.chunk（3）
}
}
})
.row{
背景颜色：绿色；
利润率：20px；
填充：10px；
}
.项目{
背景颜色：蓝色；
保证金：4倍；
颜色：白色；
}

这不仅会隐藏标签，还会隐藏里面的所有内容。这不仅会隐藏标签，还会隐藏里面的所有内容。