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的各种常见函数定义方法
Sep 16 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
React中的refs的使用教程
Feb 13 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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.ini中文版(2)
2006/10/09 PHP
PHP分页显示制作详细讲解
2006/10/09 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
Python完全新手教程
2007/02/08 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
超市督导岗位职责
2015/04/10 职场文书
儿子满月酒致辞
2015/07/29 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技