vue改变循环遍历后的数据实例

废话不多说了，直接上代码吧！<ddclass="clearfix"v-for="(item,index)intableDataList":class="index%2!=0

废话不多说了，直接上代码吧！

<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改变循环遍历后的数据实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。