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 全角转半角部分
Oct 28 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
js获取json元素数量的方法
Jan 27 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
Vuex提升学习篇
Jan 11 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
详解ES6系列之私有变量的实现
Nov 21 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
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php日历制作代码分享
2014/01/20 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PDO::errorInfo讲解
2019/01/28 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
VSCode配置react开发环境的步骤
2017/12/27 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
layui清空,重置表单数据的实例
2019/09/12 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
使用Kivy将python程序打包为apk文件
2017/07/29 Python
5款非常棒的Python工具
2018/01/05 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
免税水晶:Duty Free Crystal
2019/05/13 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
MYSQL基础面试题
2012/05/13 面试题
祝寿主持词
2015/07/02 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers