第三个vue程序之循环语句

永困子菌

于 2022-02-14 12:29:24 发布

阅读量625

点赞数

分类专栏： Vue学习文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/radmdzjtx/article/details/122638129

版权

Vue学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue中使用v-for进行数据循环渲染。通过修改HTML代码，展示了将传统for循环转换为Vue的v-for指令的过程。在示例中，`v-for=(item, index) in items`用于遍历并显示data对象中的items数组，每个item包含一个message属性。了解这些基础知识对于初学者开始构建Vue项目的基石。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第三个vue程序就是，循环语句for
同样在vue中其就变成了v-for
底下的代码我们照样小改一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- items绑定的是下方script中的data里的items item就相当于创建了个对象 -->

    <li v-for="(item, index) in items">
        {{item.message}}--{{index}}

    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm =new Vue({
        el:"#app",
        //{}：代表对象[]：代表数组
        data:{
            items:[
                {message:'我在'},
                {message: "学习"},
                {message:"vue"}
            ]
        }

    });
</script>
</body>
</html>

div的id依旧是对应的下面el的，其中在li里写的v-for代表循环语句，items绑定的是下方script中的data里的items item就相当于创建了个对象，而index是vue自带的一个对象，具体可以上vue官网查看。

然后我们的最基础的三件套，输出，判断，循环就结束了，拿这个就可以开始最基础的项目组建了