v-for的使用，遍历数组、对象、数字、字符串等类型

遍历数组

html 复制代码

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    <!-- 结果：
      <li>Apple</li>
      <li>Banana</li>
      <li>Cherry</li>
    -->
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Cherry']
  }
});
</script>

遍历对象

html 复制代码

<div id="app">
  <ul>
    <li v-for="(value, key, index) in user" :key="index">{{ key }}: {{ value }}</li>
    <!-- 结果：
      <li>name: John Doe</li>
      <li>age: 30</li>
      <li>occupation: Developer</li>
    -->
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John Doe',
      age: 30,
      occupation: 'Developer'
    }
  }
});
</script>

遍历数字

html 复制代码

<div id="app">
  <ul>
    <li v-for="n in 5" :key="n">{{ n }}</li>
    <!-- 结果：
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    -->
  </ul>
</div>

<script>
new Vue({
  el: '#app'
});
</script>

遍历字符串

html 复制代码

<div id="app">
  <ul>
    <li v-for="(char, index) in message" :key="index">{{ char }}</li>
    <!-- 结果：
      <li>H</li>
      <li>e</li>
      <li>l</li>
      <li>l</li>
      <li>o</li>
    -->
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
});
</script>

在 Vue 2 中，v-for 指令可以用于遍历数组、对象、数字和字符串。以下是一些示例，展示了如何使用 v-for 来遍历不同类型的数据。

遍历数组

html 复制代码

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Cherry']
  }
});
</script>

遍历对象

html 复制代码

<div id="app">
  <ul>
    <li v-for="(value, key, index) in user" :key="index">{{ key }}: {{ value }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John Doe',
      age: 30,
      occupation: 'Developer'
    }
  }
});
</script>

遍历数字

html 复制代码

<div id="app">
  <ul>
    <li v-for="n in 5" :key="n">{{ n }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
});
</script>

遍历字符串

html 复制代码

<div id="app">
  <ul>
    <li v-for="(char, index) in message" :key="index">{{ char }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
});
</script>

总结

遍历数组 ：使用 v-for="(item, index) in items"，其中 item 是数组元素，index 是索引。
遍历对象 ：使用 v-for="(value, key, index) in object"，其中 value 是对象的值，key 是对象的键，index 是索引。
遍历数字 ：使用 v-for="n in number"，其中 n 是从 1 到 number 的数字。
遍历字符串 ：使用 v-for="(char, index) in string"，其中 char 是字符串的字符，index 是索引。