编写TodoList功能了解循环与双向绑定 · vue笔记

[TOC] >[success] # 编写TodoList功能了解循环与双向绑定本章节讲解了，如何使用 **v-for** 以及 **v-model** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo List</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 创建vue实例 Vue.createApp({ data(){ return{ inputValue: '', list: [ 'hello', 'word', 'dell', 'lee' ] } }, methods: { handleAddItem(){ this.list.push(this.inputValue) this.inputValue = '' } }, template: ` <div> <input v-model="inputValue"/> <button v-on:click="handleAddItem">增加</button> <ul> <li v-for="(item, index) of list">{{item}}{{index}}</li> </ul> </div> ` // 在标签中使用变量 }).mount('#root') // 将template中的内容挂载到id为root的元素中 </script> </html> ~~~