Vue列表的展示

最新推荐文章于 2024-08-15 13:48:12 发布

原创最新推荐文章于 2024-08-15 13:48:12 发布 · 842 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vuejs 专栏收录该内容

47 篇文章

订阅专栏

本文通过一个具体的示例，展示了如何在Vue.js中使用v-for指令进行列表的渲染。示例代码详细说明了如何将数据数组映射到HTML列表项上，实现动态更新列表的功能。

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

Vue列表的展示

栗子中使用了v-for指令

栗子：

<!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>

<body>
    <div id="app">
        <ul>
            <li v-for='item in movies'>{{item}}</li>
        </ul>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                movies: ['柯南', '星际穿越', '大话西游', '少年派', '盗梦空间', 'nihao']
            }
        })
    </script>
</body>

</html>

在这里插入图片描述