vue中循环遍历操作

实际开发中不免会操作循环

1、页面标签中使用：

<tr >

        <td >公司名称</td >

        <td >{{ displayData.supplierCompanyName }}</td >

        <td >所属行业</td >

        <td >

                <span v-for="item in displayData.demandCompany?.industry"> {{item}}</span>

        </td >

</tr >

方式二

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

方式三

<template>
        <div>
                <ul>
                        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
                </ul>
        </div>
</template>

<script>
export default {
        data() {
                return {
                        items: ['Item 1', 'Item 2', 'Item 3']
                };
        }
};
</script>

2、vue.js中使用：

方式一

const parentMessage = 'Parent'

const items = [ /* ... */ ]

items.forEach((item, index) => {

        // 可以访问外层的 `parentMessage`

         // 而 `item` 和 `index` 只在这个作用域可用

        if(index!==0) item.message+=','

        console.log(parentMessage, item.message, index)

})

方式二

    let strs=displayData.value.demandCompany.industry

   

    for(let i = 0; i < strs.length; i++){

         if(i!==0){industryStr.value+='、';}

         industryStr.value+=strs[i]

    }

方式三

let obj = {a: 1, b: 2, c: 3};
for (let prop in obj) {
console.log(prop + ": " + obj[prop]);
}

方式四

let arr = [1, 2, 3];
for (let value of arr) {
        console.log(value);
}