v-for指令是Vue中循环列表渲染的指令，大家都应该接触过各种语言中的for循环，和这个类似，只不过v-for指令是用于重复生成一段模板内容。
基础语法
v-for 的标准语法是 item in items，其中 items 是源数据（数组），而 item 是被迭代的数组元素的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 v-for 简单例子</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
// 1. 定义一个用于循环的数组
fruits: ['苹果 🍎', '香蕉 🍌', '西瓜 🍉', '葡萄 🍇']
}
},
// 2. 在 template 中使用 v-for 进行遍历
template: `
<h2>我的水果店：</h2>
<ul>
<li v-for="(item, index) in fruits" :key="index">
{{ index + 1 }}. {{ item }}
</li>
</ul>
`
});
const vm = app.mount("#root");
</script>
</html>注意： 为了让Vue更准确的识别节点， 我们应该加上一个 :key 指令， 如果是真实的开发中，最好写一个唯一的业务ID值。
遍历数组
我们可以只获取元素，也可以同时获取元素的索引（index）。
<ul>
<li v-for="movie in movies">{{ movie }}</li>
<li v-for="(movie, index) in movies">
{{ index + 1 }}. {{ movie }}
</li>
</ul>遍历对象
v-for 也可以用来遍历一个对象的属性。它可以接收三个参数：值（value）、键名（key）和索引（index）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 v-for 遍历对象示例</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
}
.container {
max-width: 400px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 02px4pxrgba(0,0,0,0.1);
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 8px12px;
margin-bottom: 6px;
background-color: #f0f2f5;
border-left: 4px solid #42b883;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="app" class="container">
<h3>用户信息列表</h3>
<ul>
<li v-for="(value, key, index) in userProfile" :key="key">
<strong>{{ index }}</strong> - {{ key }}: {{ value }}
</li>
</ul>
</div>
<script>
// 3. 从全局变量 Vue 中解构出 createApp
const { createApp } = Vue;
// 4. 使用 Options API 创建 Vue 实例
createApp({
// data 选项：定义响应式数据
data() {
return {
userProfile: {
name: "张三",
age: 25,
gender: "男",
city: "北京",
occupation: "前端开发工程师"
}
}
}
}).mount('#app'); // 5. 挂载到指定的 id 容器上
</script>
</body>
</html>遍历整数
我们甚至可以直接让它循环指定的次数（从 1 开始计数）：
<span v-for="n in 5">{{ n }} </span>参考资料: https://cn.vuejs.org/guide/essentials/list
