javascript - 如何制作 DIV 的 v-for 循环并按部分显示它们 (Vue.js)

Question

我有以下代码:

<div class="container-fluid" id="networdapp" style="display:none;">
    <div class="row" >
        <div v-for="(result,i) in results" :key="i" class="col-sm-6" >
            <div class="card m-3 h-240  bg-light" >
                <div class="card-header text-center" > {{ result.title }} </div>
                <div class="card-body" style="height:200px" >
                    <p class="card-text" v-html="result.prevDesc" ></p>
                </div>
                <div class="card-footer bg-transparent border-info">
                    <a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
                </div>
            </div>
        </div>
    </div>
</div>

我想解析由 v-for 循环 (Vue.js) 生成的这些 col-sm-6 div。目标是让它们 5 乘 5 可见。首先，它们必须全部不可见 -> 事件处理程序 -> 5 可见 -> 事件处理程序 -> 10 可见等等......我认为我需要解析它们。{{result.title}} 和 result.prevDesc 工作正常，不用担心。

Answer 1

您可以保留您的 results 数组并创建另一个名为 shownResults 的数组，它最初不包含任何结果，但是当您单击 showMore按钮，您将有 5 个结果推送到该数组并显示，如果您再次单击，您将显示 10 个结果，依此类推，

new Vue({
  el: '#app',
  data() {
    return {
    bound:0,
       results:[
       {
       title:"title1",
       prevDesc:"desc1"
       },
        {
       title:"title2",
       prevDesc:"desc2"
       },
         {
       title:"title3",
       prevDesc:"desc3"
       },
         {
       title:"title4",
       prevDesc:"desc4"
       },
         {
       title:"title5",
       prevDesc:"desc5"
       },
         {
       title:"title7",
       prevDesc:"desc7"
       },
         {
       title:"title8",
       prevDesc:"desc8"
       }
       ],
       shownResults:[]
       } 
  },
  methods:{
  showMore(){
  this.bound+=5;
     this.shownResults=this.results.slice(0,this.bound);
  },
    getData(i){
    
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<div id="app">
<div class="container-fluid" id="networdapp" >
 <div class="row" >
    <div v-for="(result,i) in shownResults" :key="i" class="col-sm-6" >
      <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc" ></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
             </div>
         </div>
    </div>
    <a class="btn btn-info" style="height:40px" @click="showMore" >Show more</a>
    
  </div>
</div>
</div>