没有封装的简单vue todo
<template> <div id="app"> <input type='text' v-model='todo' @keyup.enter="doAdd"/> <button @click="doAdd()"> +增加</button> <br><hr><hr> <h2>进行中</h2> <ul > <li v-for="(item,key) in list" v-if="!item.checked"><input type = "checkbox" v-model='item.checked' @change="saveList()">{{item.title}}+++{{item.checked}} ---- <button @click="domin(key)"> 删除</button> </li> </ul> <h2>已完成</h2> <ul class="finish"> <!--<li v-for="(item,key) in list" v-if="!item.checked"><input type = "checkbox" v-modle="item.checked">{{item.title} ---- <button @click="domin(key)"> 删除</button>--> <li v-for="(item,key) in list" v-if="item.checked"> <input type = "checkbox" v-model='item.checked' @change="saveList()">{{item.title}}+++{{item.checked}} ---- <button @click="domin(key)"> 删除</button> </li> </ul> </div> </template> <script> export default { name: "app", data() { return { // msg: "Welcome to Your Vue.js App", todo: "", list: [] }; }, methods: { doAdd() { // console.log(e.keyCode) //if(e.keyCode==13){ this.list.push({title:this.todo, checked: null}) this.todo = ""; localStorage.setItem('list',JSON.stringify(this.list)) }, domin(key) { //alert(key) this.list.splice(key, 1);//key必须,key后面的1是删除几个,也是必须。 localStorage.setItem('list',JSON.stringify(this.list)) }, saveList(){ localStorage.setItem('list',JSON.stringify(this.list)) }, }, mounted() {//不要放错位置 var list = JSON.parse(localStorage.getItem('list')); if(list){ this.list=list; } } } </script> <style lang="scss"> #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; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { // display: inline-block; margin: 0 10px; } a { color: #42b983; } .finish{ background: greenyellow } </style>