Mr.J--Vue之v-for全解析

最新推荐文章于 2024-10-10 12:52:35 发布

End_less__

最新推荐文章于 2024-10-10 12:52:35 发布

阅读量472

点赞数

分类专栏： Vue.js学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/89599176

版权

本文详细探讨了Vue中的v-for指令，包括如何实现普通数组循环、对象数组循环、对象循环以及数字迭代。同时，强调了在使用v-for时设置key值的重要性，解释了有key值和无key值在数据绑定上的差异。

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

多次显示数据

        <p>{
  {list[0]}}</p>
        <p>{
  {list[1]}}</p>
        <p>{
  {list[2]}}</p>
        <p>{
  {list[3]}}</p>
        <p>{
  {list[4]}}</p>

上面这一种是最不好，也是几乎没人用的一种循环方式，它就不是循环（滑稽.jpg）

v-for

先只写Html里面的渲染，数据在后面展示

实现普通数组循环

<p v-for="item in list1">{
  {item}}</p>
            <!-- 普通数组 -->
            <p v-for="(item,i) in list1">数组数据 ： {
  {item}} --- 索引值: {
  {i}}</p>

实现对象数组循环

 <p v-for="item in list2">{
  {item}}</p>
            <p v-for="item in list2">{
  {item.id}} --- {
  {item.name}}</p>
            <p v-for="(item,i) in list2">{
  {item.id}} --- {
  {item.name}} --- {
  {i}}</p>

实现对象循环

<p v-for="(val,key,i) in user">{
  {val}} --- {
  {key}} --- {
  {i}}</p>

数字迭代

<p v-for="count in 5">这是{
  {count}}第次循环</p></

最低0.47元/天解锁文章