08-Vue的循环遍历

最新推荐文章于 2024-08-21 08:08:49 发布

蓝带915

最新推荐文章于 2024-08-21 08:08:49 发布

阅读量1.1k

点赞数 2

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42647711/article/details/104598372

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-for遍历数组

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <!-- 1.在遍历过程中，没有使用索引值(下标值) -->
      <ul>
        <li v-for="item in names">{{item}}</li>
      </ul>

	  <!-- 2.在遍历过程中，使用索引值(下标值) -->
      <ul>
        <li v-for="(item, index) in names">{{index + 1}}-{{item}}</li>
      </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          names: ["why", "kobe", "james", "curry"]
        }
      })
    </script>
  </body>
</html>

1.v-for是什么

for是什么这里不做讲解，v-for就是Vue专用的便捷版的for。遍历一个简单的数组不用再像原来那个for(int i = 0;i < item.length;i ++)了，只需for(item in items)即可。详细操作如下：

<ul>
	<li v-for="item in names">{{item}}</li>
</ul>

此时item就是数组names中的每一个数据项，而无序列表li的个数就是names的长度，用Mustache语法将其展示即可。效果图如下：
在这里插入图片描述

2.index的加入

很多时候我们的需求不仅仅是每个数据项，还有当前数据项的索引(下标)，Vue也帮我们在后台处理好了。代码如下：

<ul>
	<li v-for="(item, index) in names">{{index + 1}}-{{item}}</li>
</ul>

在使用时，只要将index和item放在一起即可使用index，切记item在index前面。效果图如下：
在这里插入图片描述

v-for遍历对象

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!-- 1.在遍历对象的时候，如果只是获取一个值，那么获取到的是value -->
    <div id="app">
      <ul>
        <li v-for="item in info">{{item}}</li>
      </ul>

      <!-- 2.获取key和value ===> (value,key) -->
      <ul>
        <li v-for="(value, key) in info">{{key}}-{{value}}</li>
      </ul>

      <!-- 3.获取key和value ===> (value,key,index) -->
      <ul>
        <li v-for="(value, key, index) in info">{{index}}-{{key}}-{{value}}</li>
      </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          info: {
            name: "blueribbon",
            age: 21,
            height: 191
          }
        }
      })
    </script>
  </body>
</html>

1.怎么遍历对象

如果data变量中有一个对象，它有各个不同的属性和对应的值，那也可以用v-for将它的各个属性以及属性值遍历出来显示在浏览器。

只获取value

<ul>
	<li v-for="item in info">{{item}}</li>
</ul>

效果图如下：
在这里插入图片描述

获取key和value ==> (value, key)

<ul>
	<li v-for="(value, key) in info">{{key}}-{{value}}</li>
</ul>

切记key和value的位置不能交换。效果图如下：
在这里插入图片描述

获取key，value和index ===> (value, key, index)

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

切记key，value和index三者的位置不能交换。效果图如下：
在这里插入图片描述

v-for使用过程添加key

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="(item, index) in letters" :key="index">{{item}}</li>
      </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          letters: ["A", "B", "C", "D", "E"]
        }
      })
    </script>
  </body>
</html>

1.为什么添加key

key是什么我们都知道，即唯一标识，这和Vue的动态改变页面结构有关，至于详细的解释，我借鉴了一下别人的说法，为什么添加key。

2.怎么添加key

使用v-bind:key=""，即可为当前标签添加key，由于b-bind的大量使用，贴心的Vue后台也为我们准备了语法糖即:key=""。

3.将什么设置为key

我们都知道开发时数据都是从后端请求过来的，而了解数据库的人都知道，几乎每个表都会有一个主键，而我们的key一般都是信息的主键。

小作业

要求：遍历一个电影名字列表，默认第一个是红色字体，然后点击哪一项，该项就变成红色字体，而原来的红色字体消失。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .red {
        color: red;
      }
    </style>
  </head>

  <body>
    <!-- 点击列表中的哪一项，那么该项的文字变成红色 -->
    <div id="app">
      <ul>
        <li
          v-on:click="btnClick(index)"
          :class="{red:currentIndex === index}"
          v-for="(item, index) in movies"
          :key="index"
        >
          {{index}}-{{item}}
        </li>
      </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          movies: ["海王", "火影忍者", "进击的巨人", "星际穿越"],
          red: "red",
          currentIndex: 0
        },
        methods: {
          btnClick: function(e) {
            this.currentIndex = e
          }
        }
      })
    </script>
  </body>
</html>

1.内容讲解

首先是v-for遍历整个电影列表
用前面讲过的知识点对象语法绑定class给每个li定义一个样式red(已经在style中定义)，当该li的index等于data变量中的currentIndex为true时，样式red生效，因为默认初始第一项是红色，所以currentIndex初始值为0。
给第个li添加一个点击事件，当前项被点击时，data变量中的currentIndex的值更改为当前项的index，则当前项的样式red为true，第一项的样式red为false。
绑定key为每一项的index。