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 圆形旋转图片滚动切换效果
Jan 19 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
详解vuex的简单使用
Mar 12 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
php类中private属性继承问题分析
2012/11/01 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js实现简单的验证码
2015/12/25 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python读取Android permission文件
2013/11/01 Python
python实现dict版图遍历示例
2014/02/19 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
英国计算机商店:Technextday
2019/12/28 全球购物
物业总经理助理岗位职责
2014/06/29 职场文书
2016年校长新年寄语
2015/08/17 职场文书