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 相关文章推荐
php析构函数的具体用法小结
Mar 11 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP数组函数知识汇总
2016/05/12 PHP
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
nodeJS微信分享
2017/12/20 NodeJs
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python查询sqlite数据表的方法
2015/05/08 Python
python数据结构之列表和元组的详解
2017/09/23 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python 获取等间隔的数组实例
2019/07/04 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
django项目中新增app的2种实现方法
2020/04/01 Python
基于python代码批量处理图片resize
2020/06/04 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
不假外出检讨书
2014/01/27 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
小学班主任自我评价
2015/03/11 职场文书
收银员岗位职责范本
2015/04/07 职场文书
小数乘法教学反思
2016/02/22 职场文书