一、Vue循环div
在Vue中使用v-for指令可以很方便地实现循环操作，直接对数组、对象进行循环，也可以循环数组中的每个元素（即div）以生成新的页面内容。
以下是一个简单的实现，通过v-for循环数组中的元素，在div中生成新的内容：
<div id="app">
<div v-for="item in items">
{{ item }}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['Item 1', 'Item 2', 'Item 3']
}
})
</script>
以上代码中，Vue实例的data属性中有一个items数组，v-for指令会对数组中的每个元素进行循环，并在html页面中生成一个新的div来展示一个元素。这样，我们就完成了将数组循环展示的操作。
二、Vue中map循环遍历实例
在Vue中，使用v-for指令循环遍历的不仅仅是数组，还可以是对象，我们可以使用key-value的方式来循环对象。
以下是一个实现，利用v-for对一个对象的属性进行遍历：
<div id="app">
<ul>
<li v-for="(value, key) in obj">
{{ key }}: {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
obj: {
msg1: 'Hello',
msg2: 'World'
}
}
})
</script>
以上代码中，Vue实例的data属性中有一个obj对象，通过v-for指令对对象进行循环，我们可以遍历key-value的键值对，并通过html页面中的新生成的li标签将其展示出来。
三、Vue循环指令
v-for是Vue提供的内置指令之一，是一个强大的循环指令，可用于多种方案。除此之外，Vue还提供了其它实用循环指令，例如v-if和v-show等。
以下是一些常见的Vue循环指令，简单介绍一下：
- v-for：用来循环数组或者对象
- v-if：有条件的渲染某个元素，可以与v-else一同使用
- v-show：根据表达式的真假值来显示或隐藏一个元素
- v-else：必须与v-if一同使用，表示上一个v-if语句不成立（false）时才会渲染
- v-text：与{{message}}指令等价，用来设置元素的纯文本内容
四、Vue循环数组前几个
通过v-for指令，我们可以很容易地将整个数组循环展示，但有时我们只需要展示数组中的前几个元素，这时就需要用到Vue的一个特殊指令——v-for的限制。
以下是一个实现，展示数组中的前三个元素：
<div id="app">
<div v-for="(item, index) in items" v-if="index < 3">
{{ item }}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
}
})
</script>
以上代码中，我们在v-for指令中加入了v-if条件，只对index小于3的元素进行循环展示。
五、Vue循环遍历数组
Vue提供了一个简单的指令，叫做v-for，可以很容易地遍历数组并显示到页面上。这个指令可以接受一个对象、数组、字符串或者数字，然后将其循环遍历展示到页面上，非常方便。
以下是一个实现，展示一个数组：
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ index }}: {{ item }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['Item 1', 'Item 2', 'Item 3']
}
})
</script>
以上代码中，我们通过v-for指令遍历了items数组，并在html页面中生成了一个新的li标签，展示数组的每个元素及其索引。
六、Vue循环key的作用
在Vue中，使用v-for进行循环遍历时，可以加上:key属性来为遍历的元素指定一个唯一的标识符。这个标识符被称为key，它的作用是更好的管理新旧元素的变化，对于循环中有大量的其它元素的情况下，通过加上:key属性，可以改善渲染性能。
以下是一个实现案例：
<div id="app">
<ul>
<li v-for="(item, key) in items" :key="key">
{{ item }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['Item 1', 'Item 2', 'Item 3']
}
})
</script>
在上面的示例中，我们在li标签内使用:key指定了一个唯一值作为标识符。这样在渲染时，Vue就可以更好的管理新旧元素的变化。
七、Vue循环出选项
Vue中的v-for指令可以在模板中循环渲染数组和对象。有时候我们需要将数据渲染成选项，让用户选择，此时可以使用v-for指令。
以下是一个简单的实现，将items数组中的选项以option的形式展示：
<div id="app">
<label>请选择</label>
<select name="items" id="items">
<option v-for="(item, index) in items" :key="index" :value="item">
{{ item }}
</option>
</select>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['Item 1', 'Item 2', 'Item 3']
}
})
</script>
以上代码中，我们在select标签中使用v-for指令，循环展示数组中的选项，并添加了:key属性的绑定。
八、Vue循环map数据
通过Vue中的v-for指令，我们不仅可以循环数组或对象，还可以根据某些逻辑去循环生成一些特定的数据。例如，我们可以通过map循环生成一个对象数组。
以下是一个实现，利用map函数循环生成一个对象数组：
<div id="app">
<ul>
<li v-for="(item, index) in mapFunction">
{{ index }}: {{ item.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
computed: {
mapFunction() {
return [1, 2, 3].map((item) => {
return {
id: item,
text: 'Item ' + item
}
})
}
}
})
</script>
以上代码中，我们利用computed计算属性，用map函数循环生成一个对象数组并展示出来，将index作为对象数组的索引，text属性作为每个对象的文本内容。
九、Vue循环list数据
循环list数据是Vue中非常常用的操作之一，Vue提供了一个叫做v-for的指令，可以循环渲染数组或对象。在一些需要循环list数据来渲染的场景中，Vue的v-for指令就可以派上大用场。
以下是一个实现案例：
<div id="app">
<p>{{ totalCount }} Items</p>
<ul>
<li v-for="(item, index) in items" :key="index">
<div>
<span>{{ item.name }}</span>
<span>${{ item.price }}</span>
</div>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'Item 1', price: 10.0 },
{ id: 2, name: 'Item 2', price: 20.0 },
{ id: 3, name: 'Item 3', price: 30.0 }
]
},
computed: {
totalCount() {
return this.items.length
}
}
})
</script>
在上面的示例中，我们通过v-for指令循环遍历items数组，并通过:key属性添加元素唯一标识符来管理新旧元素的变化。totalCount计算属性实时计算items数组的长度，并展示在页面中。
十、Vue循环数字选取
在实际开发中，有些情况需要我们循环遍历一个数字范围。可以利用Vue的计算属性和v-for指令来实现。
以下是一个实现，循环遍历数字1到10：
<div id="app">
<ul>
<li v-for="(item, index) in numbers" :key="index">
{{ item }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
computed: {
numbers() {
return Array.from({ length: 10 }, (value, index) => index + 1)
}
}
})
</script>
以上代码中，我们利用计算属性和Array.from()方法生成一个数组，再利用v-for指令循环展示出来。Array.from()方法创建一个新的数组实例，第一个参数指定数组长度，第二个参数指定对于每个数组元素需要执行的函数。
