Vue指令之v-for

ShadyPi2024-03-29 18:53

跟其他语言中的for一样，是用来渲染多个类似实例的。

语法为v-for="(item, index) in 可迭代对象"，一般就用于遍历数组。这里的语法跟Python中的for循环+enumerate也有点相似之处，但要注意item在前，index在后，同时也可以只遍历item。

遍历得到的item和index可以通过双大括号插入语句在网页上渲染。

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="app">
        <!-- 无序列表ul -->
        <ul>
            <!-- 列表中的标签项li -->
            <li v-for="(item, index) in text_list">{{ index+1 }}-{{ item }}</li>
        </ul>
        <ul>
            <li v-for="item in text_list">{{ item }}</li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                text_list: ["星期一", "星期二", "星期三", "星期四"]
            }
        })
    </script>
</body>
</html>

效果如下：

在实际开发中，使用v-for渲染li这样的条目还有一点需要注意，就是最好给每个条目加上:key=唯一标识，这样将每个渲染出来的条目唯一的标识起来。因为v-for的默认行为会尝试就地复用 ，即如果对数组中的成员进行了更改，如删除，v-for会直接尝试把被删掉标签后面的内容挪动到前面来，而非直接重新渲染，这样的行为在某些时候会导致问题，例如当被删去的标签有独特的属性时，值得注意。