vue提供了v-for指令来遍历元素

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="movie in movies">{{movie}}</li>
        </ol>
    </div>
    
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">    

        const test = new Vue({
            el:"#app",  
            data:{
                movies:['星际传奇','星际穿越','复仇者联盟','环太平洋']
            }
        })
    </script>
</body>

这里我们要将电影名称在列表中展示，先在data中用数组保存电影名称。

语法：v-for="自定义变量 in 要遍历的元素"

我们要将每个电影放在一个li中，只需要在一个li中使用v-for指令，vue会根据movies的长度来创建对应数量的li

运行结果

1.星际传奇
2.星际穿越
3.复仇者联盟
4.环太平洋