vue 实现todolist,包含添加,删除,统计,清空,隐藏功能
添加:生成列表结构(v-for+数组)、获取用户输入(v-model)、通过回车新增数据(v-on+.enter)
删除:点击删除指定内容(v-on+splice索引)
统计:统计信息个数(v-text+length)
清空:点击删除所有信息(v-on)
隐藏:没有数据时,隐藏元素(v-show/v-if+数组非空)
<template> <div id="app"> <div id="todolist"> <input type="text" v-model="inputVal" @keyup.enter="add" /> <ul> <li v-for="(value,index) in list"> <div> <span>{{index+1}}</span> <label>{{value}}</label> <button @click="del(index)">删除</button> </div> </li> </ul> <!-- 隐藏 --> <footer v-show="list.length!=0"> <span> <!-- 统计 --> <em>{{list.length}}</em> list </span> <!-- 清空 --> <button @click="clear" >clear</button> </footer> </div> </div> </template> <script> export default { name: "App", data: () => { return { list: ["aaa", "bbb", "ccc"], inputVal: "" }; }, methods: { // 添加 add: function() { this.list.push(this.inputVal); }, // 删除 del:function(index){ this.list.splice(index,1) }, // 清空 clear:function(){ this.list=[] } } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } ul, li { list-style: none; } </style>
来源:https://www.cnblogs.com/yieix/p/12242830.html