Vue循环详解

一、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()方法创建一个新的数组实例，第一个参数指定数组长度，第二个参数指定对于每个数组元素需要执行的函数。