vue实现【接口数据渲染随机显示】和【仅显示前五条数据】

🚀作者简介

笔名：水香木鱼

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

---

📒技术聊斋

（1）数据渲染随机显示

每次进入页面 数据自动刷新 随机位置

data 中定义 tagList数组 以下为本地数据👇

 data() {
    return {
       tagList: [
        {
          id: 1,
          name: "货运",
        },
        {
          id: 2,
          name: "安全",
        },
        {
          id: 3,
          name: "信息化",
        },
        {
          id: 4,
          name: "铁科院",
        },
        {
          id: 5,
          name: "备品备货",
        },
        {
          id: 6,
          name: "铁路局",
        },
        {
          id: 7,
          name: "建设部",
        },
        {
          id: 8,
          name: "公司函",
        },
        {
          id: 9,
          name: "部门函",
        },
        {
          id: 10,
          name: "铁道",
        }
      ],
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

methods 生命周期函数中定义 getStochasticData 方法

  methods: {
    //随机显示处理
    getStochasticData() {
      this.tagList.sort(function () {
        return Math.random() - 0.5;
      });
    },
  }
1
2
3
4
5
6
7
8

mounted 生命周期函数中调用

  mounted() {
   this.getStochasticData()
  }
1
2
3

（2）仅显示前五条数据

使用splic（0，*） 【参数0 为起始，参数*为显示几条数据】

栗子：

• splic（0，8） 【8条】
• splic（0，18）【18条】
• splic（0，2）【2条】

<el-tag
	type="info"
	v-for="item in tagList.slice(0, 5)"
	:key="item.id">{{ item.name }}
el-tag>
1
2
3
4
5

---

📓精品推荐

🔋vue实现随机验证码(数字类型、字母类型)业务【适用于登录页、网页安全码】

🔋vue实现换一批业务【WoodenFish完整版】

🔋vue实现刷新页面随机切换背景图【适用于登陆界面】

🔋vue实现浏览器禁止复制、禁用F12、禁用右侧菜单

🔋vue封装返回顶部组件【cv可用】

---

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。