vue遍历四个ul ，每个ul中有四个li.如何不破坏html结构？

Question

http://en.jsrun.net/cqiKp/edit

由于页面中使用了css3方法 ul>li*4 margin-right:0;
导致只能用ul允许 存在四个li .不然在ul多了五个li. 页面就不好看了。

// CurriculumSpecial.html
var na1=new Vue({
    el:".col-4",
    data: {
     "ulist":[1,2,3,4],
     "course":[
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","baoming":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","baoming":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","baoming":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        ],
    },
    created:function(){
        // console.log(ulist);
    }
})

    <ul class="col-4" v-cloak>
        <li v-for="st in course">
            <i class="icon-baoming" v-if="st.baoming">已报名</i>
            <i class="icon-bm" v-if="st.bm">报名</i>
            <a href="special/CurriculumSpecial.html"><img :src="st.url" alt="">
                <p><span class="f16">{{st.title}}</span> <span class="timeRed">总学时：{{st.time}}</span></p>
            </a>
        </li>
    </ul>

就是每个ul中遍历四个li.一共有四个 。
但data数据是否有误？

Answer 1

在ul上加v-for="index of (Math.ceil(course.length / 4))
li的v-for改为st in course.slice((index - 1) * 4, (index - 1) * 4 + 4)
这里el选项不能还是".col-4"，需要改一下

Answer 2

所以你想变成4个 ul 每个 4个 li？

var list = [1,2,3,4];
var list2 = //你很长的 那个数组
 <ul  v-for=" （i,index1） in list">
    <li v-for = "（i,index2） in list">
        {{ list2[index1*4 + index2 ]}}
    </li>
</ul>


哪里没有用？？？

？？？？

Answer 3

需求不是很明确啊

Answer 4

我理解的需求：有一个数组，需要将其内部改成n个数组，每个子数组的个数是4，这样形成一个二维数组。

loadsh有个chunk方法，可以简单实现（当然也可以自己用原生的写）。给个例子：

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

然后，html里，需要在ul那一层就套循环，解开最外层的数组，最后循环li，个数已经固定为4了。

---

var chunkArray = function (array, size) {
    let newArr = [];
    for(var i=0; i < array.length; i += size){
       newArr.push(array.slice(i, i + size));
    }
    return newArr;
};

var arrChunked = chunkArray(['a', 'b', 'c', 'd'], 2);
console.log(arrChunked);

Answer 5

方法比较笨,将数组进行操作改为一个符合你要求的新数组,然后在进行vue遍历
而且我感觉使用class挂载vue实例不太好

• html 部分

<div class="col-4">
    <ul  v-cloak v-for="sts in courseArr">
        <li v-for="st in sts">
            <i class="icon-baoming" v-if="st.baoming">已报名</i>
            <i class="icon-bm" v-if="st.bm">报名</i>
            <a href="special/CurriculumSpecial.html"><img :src="st.url" alt="">
                <p><span class="f16">{{st.title}}</span> <span class="timeRed">总学时：{{st.time}}</span></p>
            </a>
        </li>
     </ul>
</div>

js部分

courseList:function(){
    for( let j=0;j<this.course.length/4;j++){
         this.courseArr.push([]);
         for(let i=0;i<4;i++){
            var ii = j*4+1
            this.courseArr[j].push(this.course[ii]);    
          }
    }
}

Answer 6

// CurriculumSpecial.html
var na1=new Vue({
    el:".col-4",
    data: {
     "ulist":[1,2,3,4],
     "course":[
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","baoming":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","baoming":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","baoming":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        // {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},
        ],
    },
    created:function(){
        // console.log(ulist);
    },
    methods: {
        limit:function(i, length){
            this.course.filter(function (item, index) {
              return index >= i || index < i + length; 
            })
        }
    }
})

Answer 7

不太明白需求，但是这样截取应该比较方便

<ul v-for="i in 4">
   <li v-for="item in items.slice((i-1)*4,i*4)">{{item}}</li>
</ul>