Vue 中 v-for 的全方位解读：含案例与 key 属性运用及常用数组方法

前端基地

已于 2024-06-19 10:51:59 修改

阅读量805

点赞数 16

分类专栏： vue第一季文章标签： vue.js elementui javascript html5 json css3 html

于 2024-06-19 09:23:30 首次发布

本文链接：https://blog.csdn.net/chinayun_6401/article/details/139789928

版权

v-for介绍

v-for key属性的使用

Vue数组方法

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>

最低0.47元/天解锁文章

前端基地

关注

16
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue 中 v-for 的全方位解读：含案例与 key 属性运用及常用数组方法

v-for 能够对数字、数组以及对象进行遍历。值得注意的是，当 v-for 与 v-if 一同运用时，v-for 的优先级要高于 v-if。正因如此，应尽量避免将 v-if 和 v-for 共同使用。特别是在嵌套使用的情况下，每一次 v-for 的执行都会伴随着一次 v-if 的执行，这会引发重复计算的问题，进而对性能产生影响，所以 vue 官方并不提倡这种使用方式。
复制链接

扫一扫