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 相关文章推荐
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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静态类
2006/11/25 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
js获取form的方法
2015/05/06 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Python socket 套接字实现通信详解
2019/08/27 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
我的中国梦演讲稿500字
2014/08/19 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2014年食堂工作总结
2014/11/20 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS