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 相关文章推荐
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
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
德生S2000电路分析
2021/03/02 无线电
php whois查询API制作方法
2011/06/23 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
JS 建立对象的方法
2007/04/21 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python实现一组典型数据格式转换
2018/12/15 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
食堂采购员岗位职责
2015/04/03 职场文书