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()方法創建一個新的數組實例，第一個參數指定數組長度，第二個參數指定對於每個數組元素需要執行的函數。