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 是索引。
相关推荐
鱼樱前端1 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆2 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅3 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水3 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了4 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry4 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户26124583401616 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川6 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术7 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再9 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down