VUE3（五）列表渲染

v-for

遍历数组

    <template id="my-app">
        <ul>
            <li v-for="movie in movies">{{movie}}</li>
        </ul>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    movies: [
                        "星际穿越",
                        "盗梦空间",
                        "大话西游",
                        "教父",
                        "少年派"
                    ]
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>

获取下标方式：

    <template id="my-app">
        <ul>
            <li v-for="(movie, index) in movies">{{index+1}}.{{movie}}</li>
        </ul>
    </template>