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 是索引。
相关推荐
李剑一4 分钟前
vitepress中logo打包丢失
vue.js
鹏多多23 分钟前
前端IndexedDB数据库高效管理插件localForage的教程+案例
前端·javascript·vue.js
Jammingpro4 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
闲蛋小超人笑嘻嘻11 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
焚 城12 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
会写代码的饭桶12 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中12 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略13 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen86813 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
LuckySusu15 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js