Vue指令之v-for

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

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

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

示例代码：

<!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会直接尝试把被删掉标签后面的内容挪动到前面来，而非直接重新渲染，这样的行为在某些时候会导致问题，例如当被删去的标签有独特的属性时，值得注意。