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: "铁道",
        }
      ],
  }
}

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

methods: {
    //随机显示处理
    getStochasticData() {
      this.tagList.sort(function () {
        return Math.random() - 0.5;
      });
    },
  }

mounted 生命周期函数中调用

mounted() {
   this.getStochasticData()
  }

（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>

​

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