天下无坑

天下无坑


数组与indexOf()与splice增删改

<blockquote> <p><strong><code>Array.prototype.indexOf()</code></strong> 方法可返回数组中某个指定的元素位置。 该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。 如果在数组中没找到指定元素则返回 -1。</p> </blockquote> <h4>不用遍历匹配ID,轻松实现数组元素的 <code>删除</code> <code>修改</code> 等操作</h4> <pre><code class="language-javascript">let items = [{id:1,n:"n1"},{id:2,n:"n2"},{id:3,n:"n3"}]; let item = items[2]; //查询值必须是对数组的浅复制 // let item = {v:2,n:"n2"} //这种方式是查找不到的 //用item做indexOf的参数,可以得到item在数组items中的索引值 console.log('index',items.indexOf(item)); //修改操作 item的值改变了,但索引值仍不变 items.splice(items.indexOf(item), 1, {id:4,n:"n4"}); console.log('update',items); //删除操作 items.splice(items.indexOf(item), 1); console.log('delete',items) //末尾追加操作 items.splice(items.length, 0, {id:100,n:"n100"}); console.log('create',items)</code></pre> <blockquote> <p><strong>注意!!!在v-for 中,应使用items的id作为:key的绑定值,否则总是删除最后一个</strong></p> </blockquote> <pre><code class="language-html">// 实例 &lt;ul&gt; &lt;li v-for="d in items" :key="d.id"&gt; {{d.n}} &lt;/li&gt; &lt;/ul&gt; </code></pre>

页面列表

ITEM_HTML