Vue中v-for指令的详细应用与遍历数据说明

一只欢喜

于 2024-01-17 11:29:56 发布

阅读量996

点赞数 9

分类专栏： Vue项目知识及问题集合文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44866810/article/details/129461833

版权

22 篇文章 0 订阅

订阅专栏

本文详细解释了Vue.js中的v-for指令，用于遍历数据并生成结构，强调了key的作用以及在不同数据类型下的使用，包括数组、对象、字符串和固定次数的遍历。还展示了v-for的健壮性，即使面对null、undefined、空字符串和布尔值也能正确处理。

摘要由CSDN通过智能技术生成

通俗理解：想生成多个谁，就在谁身上加v-for，别忘了写key。
key的使用原则（同react）：有唯一值就用唯一值（身份证号、手机号、学号…），没有就用索引值。

遍历数组

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

遍历对象

<li v-for="(value,key,index) in car" :key="index"> 
  {{value}} - {{key}} - {{index}}
</li>

遍历字符串

<li v-for="(char,index) in str" :key="index"> 
  {{char}} - {{index}} 
</li>

遍历指定次数

<li v-for="(number,index) in 10" :key="index"> 
  {{number}} - {{index}}
</li>

v-for很健壮，遍历如下内容都不会报错

<h1 v-for="(a,b) in null">你好</h1>
<h1 v-for="(a,b) in undefined">你好</h1>
<h1 v-for="(a,b) in '' ">你好</h1>
<h1 v-for="(a,b) in true ">你好</h1>

关注

专栏目录