目录
v-for介绍
v-for 能够对数字、数组以及对象进行遍历。值得注意的是,当 v-for 与 v-if 一同运用时,v-for 的优先级要高于 v-if。正因如此,应尽量避免将 v-if 和 v-for 共同使用。特别是在嵌套使用的情况下,每一次 v-for 的执行都会伴随着一次 v-if 的执行,这会引发重复计算的问题,进而对性能产生影响,所以 vue 官方并不提倡这种使用方式。
示例代码如下:
<body>
<div id="app">
<el-divider content-position="left">遍历数字</el-divider>
<el-checkbox-group v-model="checkList">
<el-checkbox :label="i" v-for="i in 10" :key="i">复选框{
{i}}</el-checkbox>
</el-checkbox-group>
<el-divider content-position="left">遍历数组</el-divider>
<ul>
<li v-for="(item,i) in arr" :key="i">{
{item}}</li>
</ul>
<el-divider content-position="left">遍历对象数组</el-divider>
<el-select v-model="value" placeholder="请选择用户">
<el-option v-for="item in list" :key="item.id" :value="item.name">
</el-option>
</el-select>
<el-divider content-position="left">遍历对象</el-divider>
<el-descriptions title="">
<el-descriptions-item :label="key" v-for="(val,key,i) in obj" :key="i">{
{val}}</el-descriptions-item>
</el-descriptions>
标签:遍历,key,对象,Vue,数组,使用
From: https://blog.csdn.net/chinayun_6401/article/details/139789928