Day14——v-for循环遍历

痛定思痛。 2023-02-27 12:14 15阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. 循环遍历
 *   *  2.1 v-for的语法
     *  2.2 v-for遍历数组
     *  2.3 v-for遍历对象
     *  2.4 组件的key属性
 *  三. 案例

# 一. 回顾 #

前面学习了[Day13——v-if、v-else、v-else-if条件判断][Day13_v-if_v-else_v-else-if]，今天学习v-for循环遍历

# 二. 循环遍历 #

## 2.1 v-for的语法 ##

语法：`v-for="{变量别名 in 变量}"`，如果要拿到数组中的索引，就用`v-for="{(变量, index) in 变量}"`

## 2.2 v-for遍历数组 ##

例子：

<body>
    <div id="app">
      
      <ul>
        <li v-for="item in names">{
       {item}}</li>
      </ul>
      
      <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: ['aaa', 'bbb', 'ccc', 'ddd'] } }) </script>
    </body>

效果：  
![在这里插入图片描述][20200717152851111.jpg]

## 2.3 v-for遍历对象 ##

如果要拿到索引、key，那么索引是最后一个参数，key是倒数第二个参数，第一个参数是value。

例子：

<body>
    <div id="app">
      
      <ul>
        <li v-for="item in info">{
       {item}}</li>
      </ul>
      
      <ul>
        <li v-for="(value, key) in info">{
       {key}}-{
       {value}}</li>
      </ul>
     
      <ul>
        <li v-for="(value, key, index) in info">{
       {key}}-{
       {value}}-{
       {index}}</li>
      </ul>
    
    </div>
    <script src="../js/vue.js"></script>
    <script> const app = new Vue({ el: '#app', data: { info: { name: 'lisi', age: 12, height: 1.88 } } }) </script>
    </body>

## 2.4 组件的key属性 ##

官方推荐在使用v-for时，给元素或组件绑定一个key属性。目的是提高性能，笔者对这里不太了解，只做简单介绍。

<body>
    <div id="app">
      <ul>
        
        <li v-for="item in letters" :key="item">{
       {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>

# 三. 案例 #

需求：一组数据列表展示，初次是第一个数据显示红色，后面点击哪个元素哪个就显示红色。

实现：最关键是设置一个变量来控制某个类是否应该被加入到class属性中。用到的知识点v-bind、v-on、v-for。还有一个关键是获取数组的索引

代码：

<head>
    <style> .active{ color: red; } </style>
    </head>
    <body>
    <div id="app">
      <ul>
        <li v-for="(item, index) in movies" :class="{active: currentIdnex == index}" @click="liClick(index)">{
       {item}}</li>
      </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script> const app = new Vue({ el: '#app', data: { movies: ['海王', '妖精的尾巴', '斗罗大陆', '斗破苍穹'], currentIdnex: 0,//用作记录哪个应该是红色 }, methods: { liClick(index){ this.currentIdnex = index; } } }) </script>
    </body>

[Day13_v-if_v-else_v-else-if]: https://blog.csdn.net/qq_40634846/article/details/107408301
[20200717152851111.jpg]: /images/20230209/254d4d32ebdc4b1c960ccda32f144dab.png