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同步Import,同步调用外部js的方法
Jul 08 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
jquery 插件学习(三)
Aug 06 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
全面了解js中的script标签
Jul 04 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
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
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP微信分享开发详解
2017/01/14 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python关键字and和or用法实例
2015/05/28 Python
python爬取个性签名的方法
2018/06/17 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
结婚邀请函范文
2014/01/14 职场文书
岗位竞聘书范文
2014/03/31 职场文书
校园安全广播稿范文
2014/09/25 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
采购内勤岗位职责
2015/04/13 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers