vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例
廢話不多說了,直接上代碼吧!
<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:[],//定義列表數(shù)據(jù)信息
}
},
mounted(){
//獲取列表數(shù)據(jù)信息
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:{
//將狀態(tài)數(shù)字轉(zhuǎn)換為對應(yīng)的文字解釋
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]) 這段代碼必須寫,否則數(shù)據(jù)不會更新
以上這篇vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3在自定義hooks中使用useRouter報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue3在自定義hooks中使用useRouter報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
淺談在vue中用webpack打包之后運(yùn)行文件的問題以及相關(guān)配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運(yùn)行文件的問題以及相關(guān)配置方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
前端設(shè)置cookie之vue-cookies使用及說明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue淺析axios二次封裝與節(jié)流及防抖的實(shí)現(xiàn)
axios是基于promise的HTTP庫,可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios,?axios),本文給大家介紹axios的二次封裝和節(jié)流與防抖2022-08-08
vue watch監(jiān)聽對象及對應(yīng)值的變化詳解
下面小編就為大家分享一篇vue watch監(jiān)聽對象及對應(yīng)值的變化詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例
下面小編就為大家分享一篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例。具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3中使用ref標(biāo)簽對組件進(jìn)行操作方法
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04

