VUE3（五）列表渲染

监听数组的修改

对于一些修改数组的方法（不是生成新的数组），这些方法被调用时也会触发视图的更新：

    <template id="my-app">
        <h2>电影列表</h2>
        <ul>
            <li v-for="(movie, index) in movies">{{index+1}}.{{movie}}</li>
        </ul>
        <input type="text" v-model="newMovie">
        <button @click="addMovie">添加电源</button>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    newMovie: '',
                    movies: [
                        "星际穿越",
                        "盗梦空间",
                        "大话西游",
                        "教父",
                        "少年派"
                    ]
                }
            },
            methods:{
                addMovie(){
                    this.movies.push(this.newMovie);
                    this.newMovie='';
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>

对于生成新数组的方法，需要将数组赋值回去。