Vue 循环遍历信息方式汇总

本文汇总了 Vue 循环遍历各种信息的方式和用法。

遍历 List

测试数据

listData: ['list1', 'list2', 'list3']

Vue 遍历

<template v-for="data in listData">{{data}}</template>

for 遍历

for (let index = 0; index < this.listData.length; index++) {
    const element = this.listData[index];
    console.log(element)
}

for 增强

for (const value in this.listData) {
    console.log(value)
}

forEach 遍历

this.listData.forEach(t => {
    console.log(t)
})

map 遍历

this.listData.map(function (value) {
    console.log(value)
});

遍历 Map

Vue 遍历

<template v-for="(userOrgs, groupname) in authOrgGroup"
          :key="groupname">
</template>

for 遍历后台返回 Map

for (const key in this.authOrgGroup) {
    this.keys.push(key);
}

遍历 JSON

测试数据

jsonData: { 'key1': 'value1', 'key2': 'value2', 'key3': 'value3' }

Vue 遍历

<template v-for="(key,value) in jsonData">{{key}}-{{ value }}</template>

for 遍历

for (const key in this.jsonData) {
	console.log(key, this.jsonData[key])
}

遍历 refs

循环赋值：

<template v-for="menuType in menuTypeData">
	<el-col :span="4"
        v-if="menuNodeMap[menuType.type]!=undefined">
        <el-tag type="success">{{ menuType.comments }}</el-tag>
        <div>
            <el-tree :auto-expand-parent="false"
                     :data="menuNodeMap[menuType.type]"
                     show-checkbox
                     node-key="id"
                     :default-expanded-keys="open"
                     :props="defaultProps"
                     :ref="`${[menuType.type]}Tree`"
                     highlight-current
                     style="float:left"></el-tree>
        </div>
    </el-col>
</template>

循环获取：

res.data.mids.forEach(value => {
    let str = `${key}Tree`;
    if (this.$refs[str] && this.$refs[str][0]) {
        this.$refs[str][0].setChecked(value, true, false);
    }
});