如何在 vue.js 中有条件地打开和关闭标签？

Question

我想用 vue.js 在引导行中渲染 3 个视频。 我需要打开<div class="row"> 并每 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>

js代码：

        var videos = new Vue({
            el: '#video-list',
            data: {
                items: JSON.parse(result)
            }
        });

我看到了Conditional Rendering instructions，但是当我将此应用于此 div class="row" 时，它会隐藏包含视频的子标签！

在我的情况下，我不想管理标签渲染，我需要能够打开/关闭有条件的标签元素。

Answer 1

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

var videos = new Vue({
  el: '#video-list',
  data: function() {

    var items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

    var rows = [];

    while (items.length > 0) {
      rows.push(items.splice(0, 3));
    }

    return {
      rows: rows
    };
  }
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div class="container" id="video-list">
  <div v-for="(row, i) in rows" class="row">
    <div v-for="(col, j) in row" class="col-md-4 col-sm-4">
      <h3>{{ col + "(" + j + " " + i + ")"}}</h3>
    </div>
  </div>
</div>

Answer 2

很遗憾，你不能那样做。你需要做这样的事情：

<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>

也许您将创建一个小组件以不重复行内的代码。

Answer 3

所以这里是an answer to a question to divide an array into chunks，我用它来实现你需要的行为，下面是例子：

// https://stackoverflow.com/a/10456644/4738332
Object.defineProperty(Array.prototype, 'chunk', {value: function(n) {
    return Array.from(Array(Math.ceil(this.length/n)), (_,i)=>this.slice(i*n,i*n+n));
}});

Vue.component('app-row', {
	props:['items'],
  template:`
  	<div class="row">
    	
      <div class="item" v-for="item in items">{{item}}</div>
    
    </div>
  `

})

new Vue({
	el:"#app",
  data:{
  	items: [1,2,3,4,5,6,7,8,9,10]
  },
  computed:{
  	getRowsItems(){      
      return this.items.chunk(3)
    }
  }
  
})

.row{
  background-color: green;
  margin: 20px;
  padding: 10px;
}

.item{
  background-color: blue;
  margin: 4px;
  color: white;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <app-row v-for="rowItems in getRowsItems" :items="rowItems"></app-row>
</div>