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


Posted in Javascript onNovember 07, 2019

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

<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改变循环遍历后的数据实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 #Javascript
vue v-for直接循环数字实例
Nov 07 #Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 #Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 #Javascript
详解Angular cli配置过程记录
Nov 07 #Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 #Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 #Javascript
You might like
PHP仿盗链代码
2012/06/03 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Python实现队列的方法
2015/05/26 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
理解Python中的With语句
2016/03/18 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python中logging库的使用总结
2017/10/18 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
python求绝对值的三种方法小结
2019/12/04 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
SQL面试题
2013/04/30 面试题
青年志愿者先进事迹
2014/05/06 职场文书
医学生求职自荐书
2014/06/12 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
JAVA springCloud项目搭建流程
2022/05/11 Java/Android