vue中push()和splice()的使用解析

目录
  • vue push()和splice()的使用解析
    • push()使用
    • splice()使用
  • 使用splice()修改数据,动态渲染dom不更新

vue push()和splice()的使用解析

push()使用

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

注意：

1. 新元素将添加在数组的末尾。

2.此方法改变数组的长度。

数组中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits);
//["Banana", "Orange", "Apple", "Mango","Kiwi"];

splice()使用

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目

注意：这种方法会改变原始数组

语法：

array.splice(index,len,item1,.....,itemX)
  • index: 必需，数组开始下标 （必须是数字）
  • len: 替换/删除的长度（必须是数字，但可以是 “0”；如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。）
  • item: 替换的值，删除操作的话 item为空

说明：

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

删除

//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1);
console.log(fruits);
//["Banana", "Apple", "Mango"];

//删除起始下标为1，长度为2的一个值(len设置2)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2);
console.log(fruits);
//["Banana", "Mango"];

替换

//替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1,'ttt');
console.log(fruits);
//["Banana", 'ttt',"Apple", "Mango"];

//替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2,'ttt');
console.log(fruits);
//["Banana", 'ttt', "Mango"];

添加

//在下标为1处添加一项’ttt’

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,0,'ttt');
console.log(fruits);
//["Banana", 'ttt', "Orange", "Apple", "Mango"];

向数组中间添加元素

var items = ["1", "2", "3", "4"];
items.splice(items.length / 2, 0, "hello");
console.log(items);
// ["1", "2", "hello", "3", "4"]

使用splice()修改数据,动态渲染dom不更新

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实力踩坑 当前页push当前页无效的解决

    目录 vue当前页push当前页无效 vue push报错 TypeError: Cannot read property ‘push‘ of undefined 解决方法 vue当前页push当前页无效 当在当前页面中push页面跳转当前页,只是push的参数不同时,只能用字符串拼接,parames和query都不会起作用.不知道为什么... 比如说:当前页的url是 /invest/myinvest?page=1&day=0-30` 但是想点击的时候改变参数,所以就 this.$router

  • Vue中this.$router和this.$route的区别及push()方法

    官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由 可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa

  • Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新 一.背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新. 也就是vue生命周期函数没有执行(created.mounted钩子函数). 案例: A页面: B页面: 问题: 当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行. 二.解决方法: 1.使用activated:{}周期函数代替mounted:{}函

  • vue如何通过$router.push传参数

    vue如何通过$router.push传参数

    目录 如何通过$router.push传参数 this.$router.push传参及参数接收 1.两种方式 2.区别 如何通过$router.push传参数 下面通过A页面向B页面传值来举个例子: //A页面:  this.$router.push({     name: '页面B',     params: { data: '我是要传递的参数' } }) //B页面拿到传来的值:  this.data = this.$route.params.data // 拿到上个页面传来的数据 代码很简

  • Vue this.$router.push(参数)实现页面跳转操作

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId

  • vue中push()和splice()的使用解析

    目录 vue push()和splice()的使用解析 push()使用 splice()使用 使用splice()修改数据,动态渲染dom不更新 vue push()和splice()的使用解析 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 注意: 1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度. 数组中添加新元素: var fruits = ["Banana", "Orange", "Apple&q

  • vue中view-model双向绑定基础原理解析

    利用Object.defineProperty进行数据劫持 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue

  • vue中then后的返回值解析

    目录 then后的返回值 获取.then()中的返回值 解决方法如下 调用此方法 then后的返回值 Promise 中处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他返回一个有效数据之后再进行下一步处理 可以使用 async 和 await来得到我们的返回值 在vue 中的函数加上async async del(id){       var that=this              var params={               sensor

  • Vue中computed及watch区别实例解析

    计算属性computed : 1. 支持缓存,只有依赖数据发生改变,才会重新进行计算 2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed5.如果computed属性属性值是函数,那么默认会走get方法:

  • Vue中的路由配置项meta使用解析

    Vue中的路由配置项meta使用解析

    目录 Vue路由配置项meta使用 这里简单的举两个例子 Vue路由中的meta问题 meta (元数据) Vue路由配置项meta使用 meta简单来说就是路由元信息 也就是每个路由身上携带的信息. 这里简单的举两个例子 其次还有一个功能就是能够控制公共组件的显示或隐藏 请忽视 keep-alive标签 Vue路由中的meta问题 我们经常会在进入一个页面时判断是否已经登陆,经常会用到路由导航守卫router.beforeEach(to, from, next), 一个两个页面还好,但是多的话

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • 解析vue中的$mount

    解析vue中的$mount

    本文主要是带领大家分析$mount. $mount所做的工作从大体来讲主要分为3步: 1.如果你的option里面没有 render 函数,那么,通过 compileToFunctions 将HTML模板编译成可以生成VNode的Render函数. 2.new 一个 Watcher 实例,触发 updateComponent 方法. 3.生成vnode,经过patch,把vnode更新到dom上. 由于篇幅有限,这里先说前两步,第三步下篇说. 好,下面具体的说.首先,我们来到 $mount 函数

  • 浅谈vue中.vue文件解析流程

    我们平时写的 .vue 文件称为 SFC(Single File Components),本文介绍将 SFC 解析为 descriptor 这一过程在 vue 中是如何执行的. vue 提供了一个 compiler.parseComponent(file, [options]) 方法,来将 .vue 文件解析成一个 descriptor: // an object format describing a single-file component. declare type SFCDescrip

  • 全面解析Vue中的$nextTick

    当在代码中更新了数据,并希望等到对应的Dom更新之后,再执行一些逻辑.这时,我们就会用到$nextTick funcion callback(){ //等待Dom更新,然后搞点事. } $nextTick(callback): 官方文档对nextTick的解释是: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 那么,Vue是如何做的这一点的,是不是在调用修改Dom的Api之后(appendChild, textContent = "xxxx

  • VUE中的无限循环代码解析

    VUE中的无限循环代码解析

    代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:

随机推荐