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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
Node.js实现数据推送
Apr 14 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
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实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
大专应届生个人简历的自我评价
2013/10/15 职场文书
给导游的表扬信
2014/01/10 职场文书
会计专业自我评价
2014/02/12 职场文书
商务英语广告词大全
2014/03/18 职场文书
年终晚会活动方案
2014/08/21 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
销售助理岗位职责
2015/02/11 职场文书
费城故事观后感
2015/06/10 职场文书
2015年女工委工作总结
2015/07/27 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python