/* 获取数组元素下标 */
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 © 2014 todolist.cn
<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);
}
}
}
})
Vue.component("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);
}
}
})
Vue.component("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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/11993.html
