/* 获取数组元素下标 */var i=list_done.map(item=>item.text).indexOf(value);/* 获取数组元素 */var cur_item=list_done.slice(i,i+1);/* 删除数组元素 */list_done.splice(i,1);/* 改变元素属性 */cur_item[0].visible=false;/* 元素添加到数组 */list_having.push(cur_item[0]);
完整代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/vue-1.css" /><title></title></head><body><div class="nav"><div id="app1" class="d-center"><div class="logo-text">ToDoList</div><input type="text" placeholder="添加ToDo" v-bind:title="title" @keydown.enter="enter() " v-model="text" /></div></div><div class="d-center"><div id="app2" class="having"><h2>正在进行</h2><div class="num">{{list.length}}</div><div><ul><todo-item v-for="item in list" v-bind:todo="item"></todo-item></ul></div></div><div id="app3" class="done"><h2>已经完成</h2><div class="num">{{list.length}}</div><div><ul><cancel-item v-for="item in list" v-bind:cancel="item"></cancel-item></ul></div></div><div class="readme">Copyright © <span>clear</span></div></div><script src="js/vue.js"></script><script>var list_having = [];var list_done = [];var temp_list = localStorage.getItem("list_having");if (temp_list != null) {list_having = JSON.parse(temp_list);}temp_list = localStorage.getItem("list_done");if (temp_list != null) {list_done = JSON.parse(temp_list);}var app1 = new Vue({el: "#app1",data: {title: "请填写此字段",text: ""},methods: {enter: function() {if (this.text != "") {list_having.push({text: this.text,visible: true});this.text = "";var jsonArrayString = JSON.stringify(list_having);localStorage.setItem("list_having", jsonArrayString);}}}})ponent("todo-item", {props: ['todo'],template: "<div class='having-item'><div class='overCheckbox'></div><input type='checkbox' v-model='todo.visible' @click='delItem(todo.text)' v-model='todo.visible'/><div class='outside-border'></div><div class='del-btn' @click='removeItem(todo.text)'>-</div><span>{{todo.text}}</span></div>",methods: {delItem: function(value) {/* 获取数组元素下标 */var i=list_having.map(item=>item.text).indexOf(value);/* 获取数组元素 */var cur_item=list_having.slice(i,i+1);/* 删除数组元素 */list_having.splice(i,1);/* 改变元素属性 */cur_item[0].visible=true;/* 元素添加到数组 */list_done.push(cur_item[0]);var jsonArrayString = JSON.stringify(list_having);localStorage.setItem("list_having", jsonArrayString);jsonArrayString = JSON.stringify(list_done);localStorage.setItem("list_done", jsonArrayString);},removeItem: function(value) {/* 获取数组元素下标 */var i=list_having.map(item=>item.text).indexOf(value);/* 获取数组元素 */var cur_item=list_having.slice(i,i+1);/* 删除数组元素 */list_having.splice(i,1);var jsonArrayString = JSON.stringify(list_having);localStorage.setItem("list_having", jsonArrayString);}}})ponent("cancel-item", {props: ['cancel'],template: "<div class='item'><input type='checkbox' v-model='cancel.visible' @change='delItem(cancel.text)' /><div class='outside-border'></div><div class='del-btn' @click='removeItem(cancel.text)'>-</div><span>{{cancel.text}}</span></div>",methods: {delItem: function(value) {/* 获取数组元素下标 */var i=list_done.map(item=>item.text).indexOf(value);/* 获取数组元素 */var cur_item=list_done.slice(i,i+1);/* 删除数组元素 */list_done.splice(i,1);/* 改变元素属性 */cur_item[0].visible=false;/* 元素添加到数组 */list_having.push(cur_item[0]);var jsonArrayString = JSON.stringify(list_having);localStorage.setItem("list_having", jsonArrayString);jsonArrayString = JSON.stringify(list_done);localStorage.setItem("list_done", jsonArrayString);},removeItem: function(value) {/* 获取数组元素下标 */var i=list_done.map(item=>item.text).indexOf(value);/* 获取数组元素 */var cur_item=list_done.slice(i,i+1);/* 删除数组元素 */list_done.splice(i,1);var jsonArrayString = JSON.stringify(list_done);localStorage.setItem("list_done", jsonArrayString);}}})var app2 = new Vue({el: "#app2",data: {list: list_having}})var app2 = new Vue({el: "#app3",data: {list: list_done}})</script></body></html>
