v-for指令的使用

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

今天的接口写完了吗？

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

阅读量398

点赞数 8

分类专栏： vue2 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/qq_65142821/article/details/135587824

版权

vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中v-for指令的作用，展示了如何使用它进行数据遍历，以及如何结合索引来获取元素的顺序。通过一个HTML示例，演示了如何在列表中显示动态数据。

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

一、作用

二、完整代码

三、运行结果

一、作用

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

二、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="/js/vue.js"></script>
<body>
    <div id="app">
       <div v-for="add in addrs">{{add}}</div><br>
       <div v-for="(add, index) in addrs">{{index+1}}:{{add}}</div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            addrs:["北京","上海","广东","深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>