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

Posted 2022-09-16 水香木鱼

🚀作者简介

笔名：水香木鱼

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗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>

---

📓精品推荐

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

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

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

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

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

---

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