<template> <div id="app"> <input type="text" v-model="todo" ref="ip"/> <button @click="add()">+新增</button> <br/> <br/> <hr/> <ul> <li v-for="(item,key) in list"> {{key}} {{item}} ----- <button v-on:click="remove(key)">删除</button> </li> </ul> </div> </template> <script> export default { name: 'app', data () { return { todo:"", list:[] } }, methods:{ add(){ var val=this.$refs.ip.value; 或者用this.todo,这两种都可以:this.todo是从model获取input种的值,因为model和view是双向关联。this.$refs.ip.value;则是直接获取view的input的dom节点然后获取text
this.list.push(val); this.todo=""; }, remove(key){ this.list.splice(key,1); } } } </script> <style> </style>
涉及知识点:
1 记录:js删除数组中某一项或几项的几种方法 2 1:js中的splice方法 3 4 splice(index,len,[item]) 注释:该方法会改变原始数组。 5 6 splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 7 8 index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空 9 10 如:arr = ['a','b','c','d'] 11 12 删除 ---- item不设置 13 14 arr.splice(1,1) //['a','c','d'] 删除起始下标为1,长度为1的一个值,len设置的1,如果为0,则数组不变 15 16 arr.splice(1,2) //['a','d'] 删除起始下标为1,长度为2的一个值,len设置的2 17 18 替换 ---- item为替换的值 19 20 arr.splice(1,1,'ttt') //['a','ttt','c','d'] 替换起始下标为1,长度为1的一个值为‘ttt’,len设置的1 21 22 arr.splice(1,2,'ttt') //['a','ttt','d'] 替换起始下标为1,长度为2的两个值为‘ttt’,len设置的1 23 24 25 26 添加 ---- len设置为0,item为添加的值 27 28 arr.splice(1,0,'ttt') //['a','ttt','b','c','d'] 表示在下标为1处添加一项‘ttt’ 29 30 看来还是splice最方便啦 31 32 2:delete delete删除掉数组中的元素后,会把该下标出的值置为undefined,数组的长度不会变 33 34 如:delete arr[1] //['a', ,'c','d'] 中间出现两个逗号,数组长度不变,有一项为undefined
35 如何使用 pop() 来删除并返回数组的最后一个元素。 36