Vue 循环指令(学习)

「已注销」

已于 2022-06-30 13:48:21 修改

阅读量850

点赞数 1

CC 4.0 BY-SA版权

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

于 2022-06-30 13:47:26 首次发布

本文链接：https://blog.youkuaiyun.com/MengShang_Cpp/article/details/125538712

前端专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了Vue框架中的循环指令使用方法，包括如何引入Vue.js、创建Vue实例、在HTML中使用v-for指令展示数据，并给出了一个具体的例子，展示了如何遍历一个包含多个任务的对象数组并显示其内容。

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

前言

随着新时代的脚步，Web端变得越来越火，出现了各式各样的JavaScript框架，Vue就是其中一个。

一、Vue是什么？

Vue是一套用于构建用户界面的渐进式框架。
在这里插入图片描述

二、如何使用循环指令

1.引入Vue.js(本文使用Vue2)

代码如下：

<script src="./vue2.js">

2.创建Vue实例并写入数据

代码如下（示例）：

const App = new Vue({
            el: '#app',
            data(){
                return {
                    todo_list: [
                        {text : "打扫卫生"},
                        {text : "读书看报"},
                        {text : "敲敲代码"}
                    ]
                }
            }
        })

3.在HTML中使用v-for指令

<div id="app">
    <ul>
        <li v-for="task in todo_list">
            {{task.text}}
        </li>
    </ul>
</div>

v-for指令有点像Python里面的for循环，其中task是一个JavaScript数组中的对象，里面含有一个text，直接显示出来

4.结果

打扫卫生
读书看报
敲敲代码

5. 完整代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="task in todo_list">
                    {{task.text}}
                </li>
            </ul>
        </div>
    </body>
    <script src="./vue2.js"></script>
    <script>
        const App = new Vue({
            el: '#app',
            data(){
                return {
                    todo_list: [
                        {text : "打扫卫生"},
                        {text : "读书看报"},
                        {text : "敲敲代码"}
                    ]
                }
            }
        })
    </script>
</html>