前言：
当前咱们对“js循环列表”大致比较注意，你们都需要分析一些“js循环列表”的相关知识。那么小编同时在网上汇集了一些对于“js循环列表””的相关内容，希望兄弟们能喜欢，各位老铁们一起来学习一下吧！先看效果吧，如下图，用vue来实现，比较简单。更多文章请关注我的头条号，我是落笔承冰
一、加入vue.js链接库，添加一个父组件，一个全局子组件。
二、这个时候网页一定是空的，所以我们在子组件添加模板吧，然后在vmd中调用。
三、我们把三行li变成一行，引入数组来显示，以后我往数组加多少就有多少行了，当然在vue中是用v-for来实行循环的。
四、调一下样式，去掉各项前的小圆点。
五、再进行一步修改 ，让这个搜索排名列表更加，好看，加宽，加下划线，调节间距。
六、看上去，是那么回事了，但我们的每一项不是123那么简单，每一项都含有几个元素，所以我们引入的不仅仅是变量数组，而对象数组。
七、我们把序号和标题，还有后面的数量一起放进去。
八、全挤在一起，确实不好吧，还有序号从0开始，也得改改。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src=""></script> <!-- vue链接库 --> <style> .myul{ width: 300px; /* 列表的宽 */ } .myul li{ list-style: none; border-bottom: 1px solid #aaa; /* 下划线 */ height: 30px; margin-top: 10px; } .itemleft{ background: #90baf3; width: 20px; height: 20px; display: inline-block; /* 不设block，你设的宽高是无效的 */ text-align: center; /* 水平居中 */ color: white; } .itemright{ float: right; } </style></head><body> <div id="vmd"> <Mylist></Mylist> <!-- 这里调用模板 --> </div> <script> Vue.component("Mylist", { data() { return { newlist: [{title:"这是第一条新闻",num:"12万"}, {title:"这是第二条新闻",num:"10万"}, {title:"这是第三条新闻",num:"9万"}, {title:"这是第四条新闻",num:"8万"}, {title:"这是第五条新闻",num:"6万"}] } }, template: ` <ul class="myul"> <li v-for="(item,i) in newlist"> <span class="itemleft">{{i+1}}</span> {{item.title}} <span class="itemright">{{item.num}}</span> </li> </ul> ` // 以上是模板 }) // 上面是全局子组件 var vm = new Vue({ el: "#vmd", }) // 上面是父组件，已与vmd元素绑定 </script></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js循环列表
