vue.js-v-for指令

这里是引用

v-for个人理解

v-for的理解：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

预期：Array | Object | number | string | Iterable (2.6 新增)
注意：
1：当和 v-if 一起使用时，v-for 的优先级比 v-if 更高
2：实际开发中，尽量使用key否则在VS code中会报错提示

在实际项目中的开发经历，直接上代码吧。

<!--将接口返回的数据渲染在列表中-->
<el-table-column prop="dtu_ids_info" label="推广产品/DTU" width="160">
        <template slot-scope="scope">
        	<!--不用v-for指令时，每一项单独取值，单独渲染-->
            {{scope.row.dtu_ids_info[0].pname}}
            {{scope.row.dtu_ids_info[1].pname}}
            {{scope.row.dtu_ids_info[2].pname}}
            {{scope.row.dtu_ids_info[3].pname}} 
          
          <!-- 接下来用v-for指令遍历数组中的每一项 -->
          <!-- v-for:括号里第一个是数组里的每一项的值，第二个是他的索引
          （即他的角标），:key="索引" ，其中这里的dtu_ids_info是接口返回
          的数组对象，即我们需要渲染的每一项的数组对象-->
          <div
            v-for="(item,key) in scope.row.dtu_ids_info"
            :key="key"
          >{{ item.pname }} {{":"}} {{ item.pid }}</div>
        </template>
 </el-table-column>

附上接口返回代码，方便理解：

// 获取列表，URL为公司内部资料，不方便透漏
        getList() {
            quRequest
                .send(URL, {})
                .then(res => {
                    this.tableLoading = true
                    this.tableData = res.data.list
                })
                .catch(err => {
                    console.log(err)
                })
        },
    },

另附上接口返回数据截图：