vue学习 12指令v-for

最新推荐文章于 2023-11-27 08:41:42 发布

扫地鼠Gordon

最新推荐文章于 2023-11-27 08:41:42 发布

阅读量595

点赞数

分类专栏： vue 文章标签： v-for

本文链接：https://blog.csdn.net/qq_28137309/article/details/89140709

版权

本文深入探讨了 Vue 框架中的 v-for 指令，讲解如何使用它遍历数组和对象。通过 `(item, index) in arr` 的语法，我们可以访问到数组中的每个元素 item 和其对应的索引 index。当 item 是对象时，可以访问其属性。值得注意的是，如果 v-for 绑定在 template 元素上，template 标签本身不会出现在最终 HTML 中。" 106584516,9204311,Java实现Josephus Problem——约瑟夫环,"['Java', '数据结构', '算法', '链表', '循环队列']

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

v-for="(item, index) in arr",其中item就是arr中的每个值,index是每个元素的索引（0开始）。

若item是对象，则item.对应的属性名；

如果v-for绑定的DOM对象是template标签（<template v-for="(item, index) in arr">），则template标签不会被渲染在html文档中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1> v-for 循环 </h1>
        <!-- 数组下标获取 -->
        <!-- {
  {characters[0]}}
        {
  {characters[1]}}
        {
  {characters[2]}} -->

        <!-- 数组