当前位置: 首页 > news >正文

bootstrap列表加序号_用vue.js做一个列表,类似于百度的搜索排名,用v-for来循环...

  • 先看效果吧,如下图,用vue来实现,比较简单。
  • 更多文章请关注我的头条号,我是落笔承冰
d4e999422e40926be7bf880428eaa274.png

一、加入vue.js链接库,添加一个父组件,一个全局子组件。

06980cd876044197c7eaad20c128a7b8.png

二、这个时候网页一定是空的,所以我们在子组件添加模板吧,然后在vmd中调用。

067d6550b1801d77fbe19245e8912c04.png
38e062fba6001d83d48f473fe752109a.png

三、我们把三行li变成一行,引入数组来显示,以后我往数组加多少就有多少行了,当然在vue中是用v-for来实行循环的。

d539f574787e1a9eb1d2339a979ab693.png
da740f133450fa995152615db2624828.png

四、调一下样式,去掉各项前的小圆点。

5632d9d037156be25990b57be5100984.png
f20a3e072f486da7d4bce7663174931e.png

五、再进行一步修改 ,让这个搜索排名列表更加,好看,加宽,加下划线,调节间距。

3c7a2f91050dd88b317d4a1e052df1b5.png
024574366a216b687ef1828c9d59bf41.png

六、看上去,是那么回事了,但我们的每一项不是123那么简单,每一项都含有几个元素,所以我们引入的不仅仅是变量数组,而对象数组。

3ee53a906ac296ac31e5f11a47066b66.png
ba99c3819e03d7310ccd94ac50402e0f.png

七、我们把序号和标题,还有后面的数量一起放进去。

9de164e9addd5d525c442e2db76a9223.png
f74841065a94da7222ea64b641609e16.png

八、全挤在一起,确实不好吧,还有序号从0开始,也得改改。

608516418841759226fe275d6db64957.png
45c4731c50b7d242545e85b336831d37.png
897654194813796e88c73709888f0896.png

 Document

相关文章:

  • 中将2个map的值合并_如果是我,不纠结卫生间留1个还是2个,主卫次卫大合并,宽敞舒适...
  • 宋佳机器人_丝路电影节|宋佳专访:特殊时期用电影抚慰人心 是很温暖的事
  • ipv4的地址位数_网络基础之IP地址和子网掩码
  • 城市运行一网统管_民主监督 | 城市运行“一网统管”,“啄木鸟”在行动
  • 能够编辑excel的python 软件有哪些_平面设计包括哪些软件,常用的设计软件都有哪些...
  • rs232串口防雷电路_【ZYNQ Ultrascale+ MPSOC FPGA教程】第十一章 RS232实验
  • 无偿献血机器人_广州首家有机器人的献血屋开业啦!快来体验吧!
  • go 标准错误输出_Linux入门-标准输出和错误输出
  • 找网络高手联系方式_怎么才能联系到网络高手(找网络高手联系方式)
  • 修改用户名_看过来,中华古诗词网络大赛注册及修改用户名通知!
  • 修改串口设备名ttymxc1_011. 有人串口服务器设置方法
  • python输出字符串列表_python学习之字符串、列表
  • python操作oracle多实例数据库_Python操作Oracle数据库的简单方法和封装类实例
  • 动态改变iview样式_重学前端基础:样式操作的方式,包括内部样式,行内样式...
  • 微星主板怎么改内存时序_让你的电脑一秒开机!科技就是生产力,几乎0自检的微星商务主板...
  • android 一些 utils
  • es6(二):字符串的扩展
  • JDK 6和JDK 7中的substring()方法
  • open-falcon 开发笔记(一):从零开始搭建虚拟服务器和监测环境
  • vue总结
  • WinRAR存在严重的安全漏洞影响5亿用户
  • 闭包--闭包之tab栏切换(四)
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 构建二叉树进行数值数组的去重及优化
  • 构建工具 - 收藏集 - 掘金
  • 讲清楚之javascript作用域
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 微服务框架lagom
  • 移动端解决方案学习记录
  • - 转 Ext2.0 form使用实例
  • 微龛半导体获数千万Pre-A轮融资,投资方为国中创投 ...
  • #if 1...#endif
  • #stm32驱动外设模块总结w5500模块
  • (1)Android开发优化---------UI优化
  • (Arcgis)Python编程批量将HDF5文件转换为TIFF格式并应用地理转换和投影信息
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • (八)Docker网络跨主机通讯vxlan和vlan
  • (多级缓存)多级缓存
  • (二)学习JVM —— 垃圾回收机制
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (规划)24届春招和25届暑假实习路线准备规划
  • (紀錄)[ASP.NET MVC][jQuery]-2 純手工打造屬於自己的 jQuery GridView (含完整程式碼下載)...
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (十一)手动添加用户和文件的特殊权限
  • (算法二)滑动窗口
  • (万字长文)Spring的核心知识尽揽其中
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • (转)视频码率,帧率和分辨率的联系与区别
  • (转载)在C#用WM_COPYDATA消息来实现两个进程之间传递数据
  • (自用)learnOpenGL学习总结-高级OpenGL-抗锯齿
  • .NET 实现 NTFS 文件系统的硬链接 mklink /J(Junction)
  • .Net 中Partitioner static与dynamic的性能对比
  • .NET开源快速、强大、免费的电子表格组件