JS获取数组元素下标，获取数组元素，删除数组元素，添加数组元素

                     /* 获取数组元素下标 */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>

JS获取数组元素下标，获取数组元素，删除数组元素，添加数组元素相关推荐

JS与jQuery获取任意事件的子元素下标(获取当前类数组的某一子元素下标)
JavaScript方法 var child = document.getElementsByClassName("child");for(var i=0;i<child.l ...
python删除元素del 可以删除部分元素吗_可以使用del删除集合中的部分元素。
[判断题]Python集合可以包含相同的元素.(3.0分) [单选题]student = dict(姓名='张三', 年龄=20, 性别='男'),则student.get("name&qu ...
javascript——数组、数组遍历、forEach、增加删除元素
数组(Array) 数组也是一个对象,它和普通对象的功能类似,也是用来存储数据的:不同的是普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引操作元素的对象中是用属性,数组中用索引索引:数 ...
c语言中的下标,c语言中数组的下标从什么入手下手？_后端开发
c言语中数组的下标从0入手下手.由于假如数组元素下标从1入手下手,每次盘算地点时,须要多做一次减法操纵.所以,为了进步效力,C言语数组元素下标从0入手下手. c言语中数组的下标从0入手下手. 数组中的 ...
php数组下标从1开始,数组的下标从什么开始
数组的下标从0开始.数组是有序的元素序列.组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量.用于区分数组的各个元素的数字编号称为下标. 本文操作环境:windows10系统.Th ...
js动态添加页面元素
在刚完成的作业中,使用的动态添加页面元素的代码: function add(name) {$("#list").append(" <a class='a' href ...
截取数组对应的长度值（形成一个新的数组）
chunk(array, size) {//获取数组的长度,如果你传入的不是数组,那么获取到的就是undefinedconst length = array.length//判断不是数组,或者size ...
vue根据索引删除数组中的一个对象_Vue实现动态添加或者删除对象和对象数组的操作方法...
添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], va ...
数据结构第一次上机顺序表表前插后插多个元素查找删除（考虑多个元素）
单链表实现见笔者另一篇博客欢迎读者批评指正类定义和函数声明切记在模板类中函数定义放在类的头文件之后 ,否则会出现链接器错误 LINK2019 ```csharp #ifndef SEQLIS ...
python123添加列表元素_Python之列表
Python变量没有数据类型,所以Python没有数组. 整数:浮点数:字符串:对象创建一个列表: 1.member=['大鱼','123','3.14','[1,2,3]'] 2.empty=[] ...

JS获取数组元素下标，获取数组元素，删除数组元素，添加数组元素

JS获取数组元素下标，获取数组元素，删除数组元素，添加数组元素相关推荐

最新文章

热门文章