提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue列表展示（循环显示）

Vue列表循环 显示 展示
2023-09-27 14:26:27 时间
  • 现在，我们来展示一个更加复杂的数据：数据列表。
    • 比如我们现在从服务器请求过来一个列表
    • 希望展示到HTML中。
  • HTML代码中，使用v-for指令
  • 更重要的是，它还是响应式的。
    当我们数组中的数据发生改变时，界面会自动改变。
    依然让我们打开开发者模式的console，来试一下

效果展示

响应式的展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{movies}}
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好啊！',
                movies:['星际穿越','大话西游','少年派','盗梦空间']
            }
        })

    </script>
</body>
</html>

相关文章