标签:button html title com htm vue.js round 讲解 todolist
todolist功能开发
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>todolist功能开发</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记,视频地址: https://www.imooc.com/learn/980--> <div> <input v-model="itemValue"/> <button @click="addList">提交</button> </div> <ul> <!--加:key可以提升性能,key值要求每次的循环都不能相同,如果list中有相同的元素,可以使用(item,index),这里的index是指list的下标--> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> </div> <script> var app = new Vue({ el: "#app", data: { itemValue:‘‘, list:[] }, methods:{ addList: function () { this.list.push(this.itemValue); this.itemValue = ‘‘; } } }); </script> </body> </html>
标签:button html title com htm vue.js round 讲解 todolist
原文地址:https://www.cnblogs.com/Torey/p/10016056.html