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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
json数据格式常见操作示例
Jun 13 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 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
图书管理程序(二)
2006/10/09 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
浅析php header 跳转
2013/06/17 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php字符串分割函数用法实例
2015/03/17 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
校园门卫岗位职责
2013/12/09 职场文书
上课说话检讨书大全
2014/01/22 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
九年级政治教学反思
2014/02/06 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
入党申请书怎么写?
2019/06/11 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
导游词之天津盘山
2019/11/01 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript