vue更改数组中的值实例代码详解


Posted in Javascript onFebruary 07, 2020

根据下标更改时

vm为新建的vue对象

ind为数组

第一个e为在数组ind中e索引位置

第二个e为更改为值e

vm.$set(vm.ind,e,e)

常规更改

arr为数组

//添加
arr.push(1);
//删除
arr.splice(*,*);
//替换
arr.splice(*,*,*);

splice方法

实例

例子 1

在本例中,我们将创建一个新数组,并向其添加一个元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
</script>

输出:

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

例子 2

在本例中我们将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)
</script>

输出:

George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

例子 3

在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)
</script>

输出:

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

总结

以上所述是小编给大家介绍的vue更改数组中的值实例代码详解,希望对大家有所帮助!

Javascript 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
Vue 一键清空表单的实现方法
Feb 07 #Javascript
Vue中qs插件的使用详解
Feb 07 #Javascript
npm qs模块使用详解
Feb 07 #Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 #Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 #Javascript
jQuery实现获取多选框的值示例
Feb 07 #jQuery
微信小程序canvas开发水果老虎机的思路详解
Feb 07 #Javascript
You might like
PHP date函数参数详解
2006/11/27 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
全面了解js中的script标签
2016/07/04 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python实现的读写json文件功能示例
2018/06/05 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python处理大日志文件
2019/07/23 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
python批量修改交换机密码的示例
2020/09/22 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
电气自动化大学生求职信
2013/10/16 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android