Day14——v-for循环遍历

最新推荐文章于 2022-05-26 09:28:12 发布

Android_la

最新推荐文章于 2022-05-26 09:28:12 发布

阅读量371

点赞数

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

本文链接：https://blog.csdn.net/qq_40634846/article/details/107409378

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. 循环遍历
三. 案例

一. 回顾

前面学习了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>

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

2.3 v-for遍历对象

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

例子：

<body>
<div id="app">
  <!-- 遍历对象的过程中，如果只是获取一个值，那个该值是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以及index，格式：(value, key, index)-->
  <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>
    <!-- 使用v-for的过程中尽量绑定一个key，而且key要有唯一性，不能用index-->
    <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>

Android_la

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Day14——v-for循环遍历

文章目录一. 回顾二. 循环遍历2.1 v-for的语法2.2 v-for遍历数组2.3 v-for遍历对象2.4 组件的key属性三. 案例一. 回顾前面学习了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
复制链接

扫一扫