html5 ul li 自动收回,vue遍历四个ul ，每个ul中有四个li.如何不破坏html结构？

最新推荐文章于 2022-07-11 10:49:44 发布

汤阳阳

最新推荐文章于 2022-07-11 10:49:44 发布

阅读量457

点赞数

文章标签： html5 ul li 自动收回

由于页面中使用了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","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","baoming":true},

// {"url":"http://mooc-10050339.cos.myqcloud.com/course/jiazhangmooc/cthimage/Y010.png","title":"幼儿阶段基础课程","time":"12","bm":true},

created:function(){

// console.log(ulist);

}

})

bVU0qh?w=443&h=176

就是每个ul中遍历四个li.一共有四个。

但data数据是否有误？

关注