实现通讯录简单的添加，删除，情况，展示计数等功能
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-for</title> </head> <body> <!--备忘录练习--> <div id="app"> <input type="text" v-model="value"/><input type="button" @click="add()" value="添加备忘"/> <li v-for="(content,index) in contents" :key="index" v-if="contents.length!=0">{{index+1}}.{{content}}<a href="javascript:;" @click="del(index)">删除</a></li></li> <li v-if="contents.length==0"><font color='red' >数据已经被清空了哟！</font></li> </ul> <a href="javascript:;" @click="clear()">清空备忘录</a> <br/> 明日需要完成事项：{{contents.length}}件 </div> </body> </html> <script src="js/vue-min.js"></script> <script> new Vue({ el: "#app", data: { contents: ["吃饭", "睡觉", "学习"], value: "" }, methods: { add() { this.contents.push(this.value); this.value = ""; }, clear() { this.contents = []; }, del(index){ this.contents.splice(index,1); } } }) </script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CykQXEb4-1639575257413)(image/image.png)]
