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 是索引。
相关推荐
wocwin38 分钟前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
NicolasCage1 小时前
Icon图标库推荐
vue.js·react.js·icon
一道雷1 小时前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Ares-Wang1 小时前
Vue》》@ 用法
前端·javascript·vue.js
张志鹏PHP全栈3 小时前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js
江城开朗的豌豆4 小时前
Vue/React凭什么吊打传统前端?6年老司机带你揭秘它们的性能杀招!
前端·javascript·vue.js
江城开朗的豌豆4 小时前
虚拟DOM:为什么React/Vue比直接操作DOM快10倍?
前端·javascript·vue.js
光影少年4 小时前
vue3.6更细哪些东西
前端·vue.js·掘金·金石计划
练习前端两年半4 小时前
Vue 3 Render函数深度解析:Text、Comment、Fragment节点的渲染机制
前端·vue.js
用户12877533236194 小时前
手写 vue3 nextTick
vue.js