vue改变循环遍历后的数据实例

 更新时间:2019年11月07日 09:41:07   作者:Eternal-memory  
今天小编就为大家分享一篇vue改变循环遍历后的数据实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

废话不多说了,直接上代码吧!

<dd class="clearfix" v-for="(item,index) in tableDataList" :class="index%2 != 0 ? 'dd-bg' : ''">
  <div class="indexItem indexItem3 tal" title=""><span>{{item.status}}{{countTotal}}</span></div>
</dd>
<script type="text/ecmascript-6">
import Vue from 'vue'
import axios from 'axios'
export default {
 data(){
  return{
   tableDataList:[],//定义列表数据信息
  }
 },
 mounted(){
 //获取列表数据信息
 axios.get('url',{
  withCredentials: true
 })
  .then((res) => {
//    console.log(res);
   let tableData = res.data.data;
   this.tableDataList = tableData.table_list;
  })
  .catch((error) => {
   console.log(error)
  })
 },
 computed:{
  //将状态数字转换为对应的文字解释
   countTotal() {
    for (let i = 0; i < this.tableDataList.length; i++) {
     if (this.tableDataList[i].status === 0) {
      this.tableDataList[i].status = '文字说明0'
     } else if (this.tableDataList[i].status === 1) {
      this.tableDataList[i].status = '文字说明1'
     } else if (this.tableDataList[i].status === 2) {
      this.tableDataList[i].status = '文字说明2'
     } else if (this.tableDataList[i].status === 3) {
      this.tableDataList[i].status = '文字说明3'
     } else if (this.tableDataList[i].status === 4) {
      this.tableDataList[i].status = '文字说明4'
     } else if (this.tableDataList[i].status === 5) {
      this.tableDataList[i].status = '文字说明5'
     }
     Vue.set(this.tableDataList,i,this.tableDataList[i])
    }
   }
 }
}
</script>

注意:Vue.set(this.tableDataList,i,this.tableDataList[i]) 这段代码必须写,否则数据不会更新

以上这篇vue改变循环遍历后的数据实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 自定义组件 v-model 使用详解

    Vue 自定义组件 v-model 使用详解

    这篇文章主要介绍了Vue 自定义组件 v-model 使用介绍,包括vue2中使用和vue3中使用,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 实现vue图片缩放方式-拖拽组件

    实现vue图片缩放方式-拖拽组件

    这篇文章主要介绍了实现vue图片缩放方式-拖拽组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • effect返回runner单测实现示例详解

    effect返回runner单测实现示例详解

    这篇文章主要为大家介绍了effect返回runner单测实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Vue Router 实现登录后跳转到之前想要访问的页面

    Vue Router 实现登录后跳转到之前想要访问的页面

    这篇文章主要介绍了Vue Router 实现登录后跳转到之前相要访问的页面,本文仅演示路由跳转和导航守卫相关代码的实现,不包含具体的权限验证和登录请求,需要的朋友可以参考下
    2022-12-12
  • vue绑定设置属性的多种方式(5)

    vue绑定设置属性的多种方式(5)

    这篇文章主要为大家详细介绍了vue绑定设置属性的多种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue实现调用PC端摄像头实时拍照

    Vue实现调用PC端摄像头实时拍照

    这篇文章主要为大家详细介绍了Vue实现调用PC端摄像头实时拍照,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 基于Vue实现文件上传的几种实现方式

    基于Vue实现文件上传的几种实现方式

    文件上传是web开发中一个常见的需求,Vue.js作为一款流行的前端框架,也提供了方便的方法来实现文件上传功能,下面这篇文章主要给大家介绍了关于基于Vue实现文件上传的几种实现方式,需要的朋友可以参考下
    2024-03-03
  • 解决vue-cli 卸载不掉的问题

    解决vue-cli 卸载不掉的问题

    这篇文章主要介绍了vue-cli 卸载不掉的问题解决方法,文中给大家介绍了安装后问题分析及解决方案,需要的朋友可以参考下
    2023-01-01
  • Vue this.$router.push(参数)实现页面跳转操作

    Vue this.$router.push(参数)实现页面跳转操作

    这篇文章主要介绍了Vue this.$router.push(参数)实现页面跳转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue常见面试题整理【值得收藏】

    Vue常见面试题整理【值得收藏】

    本文是小编给大家收藏整理的Vue常见面试题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09

最新评论