Vue学习总结（十）——循环遍历 v-for指令

最新推荐文章于 2024-07-18 18:59:22 发布

田小江爱分享

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量2.2k

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/third_/article/details/119851198

版权

本文详细介绍了Vue中v-for指令的使用，包括如何遍历数组和对象，以及在遍历过程中如何获取索引和值。同时强调了在使用v-for时添加key属性的重要性，key的作用在于提高虚拟DOM的Diff算法效率，实现高效地更新列表。

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

1、v-for遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环。
格式如下： item in items的形式。

（1）在遍历的过程中，没有使用索引值，下标值。语法格式：v-for="item in items"

（2）如果在遍历的过程中，我们需要拿到索引值。语法格式：(item, index) in items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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&

最低0.47元/天解锁文章

田小江爱分享

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue学习总结（十）——循环遍历 v-for指令

1、v-for遍历数组当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式如下： item in items的形式。（1）在遍历的过程中，没有使用索引值，下标值。语法格式：v-for="item in items"（2）如果在遍历的过程中，我们需要拿到索引值。语法格式：(item, index) in items<!DOCTYPE html><html lang="en"><.
复制链接

扫一扫