2.1 todolist功能开发
Posted torey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2.1 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>
以上是关于2.1 todolist功能开发的主要内容,如果未能解决你的问题,请参考以下文章