鍍金池/ 問答/HTML/ vue v-for 切換輸出的問題

vue v-for 切換輸出的問題

<div class="row">

                <div class="col-xs-3" v-for="rs in plateList" @click="viewPlateList(rs[1],rs[2])">
                    <div class="top-area">
                        <p>{{ rs[1] }}</p>
                        <!--<p>+0.49%</p>-->
                        <p v-bind:class="[ (rs[0] > 0) ? 'add' : 'cut' ]">{{ getFull(rs[0]) }}%</p>
                        <p>{{ rs[3] }}</p>
                        <p class="add">{{ getFull(rs[4]) }}%</p>
                    </div>
                </div>
                
                <!--#我想在這個位置 控制輸出 </div><div class="row"> -->

            </div>

大抵意思就是，我只有一個數(shù)組（數(shù)據(jù)）對象，我想通過 v-for 循環(huán)輸出，但是在模板中需要打斷輸出，比如每行 4 條記錄，第 5 條另起一行 …

必須要將我的數(shù)組拆分然后嵌套 v-for 循環(huán)嗎 ？

回答
編輯回答
墨小白
模板中需要打斷輸出

這個描述有點不明覺厲......

每行 4 條記錄，第 5 條另起一行

這個規(guī)律是固定的嗎，比如每行4個？規(guī)律的話我覺得用樣式就可以搞定了。
如果不是規(guī)律的，那么v-for循環(huán)，給個循環(huán)下標(biāo)，通過下標(biāo)來實現(xiàn)你的需求。

2018年7月19日 15:11
編輯回答
久愛她

vue不能直接滿足你的需求。
但可以轉(zhuǎn)個彎解決一下。
1.bootstrap中row下的col好像是可以自動換行的，所以，你是否真的需要那么多row?直接把所有的col放到同一個row下不行嗎？

2.如果真的要你說的那個，可以修改一個數(shù)據(jù)結(jié)構(gòu)，把你的plateList先循環(huán)一篇，變成這種結(jié)構(gòu)
var plateList=[
[rs,rs,rs,rs],
[rs,rs,rs,rs],
.....
]
然后使用v-for嵌套。

2018年1月16日 05:39
編輯回答
愛礙唉

一般都是用 computed 弄一個二維數(shù)組。

<div class="row" v-for="fourPlates of every4Plates">
  <div class="col-xs-3" v-for="rs of fourPlates"></div>
</div>
2017年6月15日 16:25
編輯回答
孤慣

拆分成兩份，因為你那在兩個區(qū)域

2018年9月11日 16:34
編輯回答
獨特范
<div class="row" v-for="i in Math.ceil(plateList.length/4)">

      <div class="col-xs-3" v-for="j in 4" v-if="(i*4 + j)<plateList.length" @click="viewPlateList(plateList[i*4 + j][1],rs[i*4 + j][2])">
         <!--每一個子項 plateList[i*4 + j]代表當(dāng)前數(shù)據(jù)-->
      </div>

</div>
2018年8月7日 12:04