Vue 循环渲染

最新推荐文章于 2023-02-19 09:57:27 发布

书和咖啡

最新推荐文章于 2023-02-19 09:57:27 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/ivenqin/article/details/110631463

版权

本文介绍了Vue中的v-for指令，用于循环渲染列表、对象和整数。详细讲解了v-for的基本语法，如`item in items`，并提供了多个示例，包括迭代对象时使用索引，以及结合v-if条件判断的用法。通过这些例子，读者可以深入理解如何在Vue应用中有效地利用v-for进行数据绑定和渲染。

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

v-for指令的使用

在 Vue 中，可以使用 v-for 指令绑定数据到数组来渲染一个列表。

使用 v-for 指令需要以 item in items 形式的特殊语法来实现。其中 items 是源数据数组，item是要在其上进行迭代的数组元素的别名：

示例：

例如假设有一组关于水果的数据，需要使用列表渲染页面，我们可以在 <li> 标签上绑定 v-for 指令：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="f in fruits">{
  {f}}</li>
        </ul>
    </div