vue修改数组元素方法
示例代码
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue修改数组元素方法</title>
</head> <body>
<div id="root">
<div v-for="item in arr">
{{ item }}
</div>
<button @click="changeArr1">修改数组元素方法--方法一</button>
<button @click="changeArr2">修改数组元素方法--方法二</button>
<button @click="changeArr3">修改数组元素方法--方法三</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript">
var vm = new Vue({
el: '#root',
data: {
arr: [1, 2, 3]
},
methods: {
changeArr1: function() {
Vue.set(vm.arr, 0, '方法一');
},
changeArr2: function() {
vm.$set(vm.arr, 0, '方法二');
},
changeArr3: function() {
this.arr.splice(0, 1, '方法三');
//vm.arr.splice(0,1,'方法三');
}
}
});
</script>
</body> </html>
vue修改数组元素方法的更多相关文章
- 几种php 删除数组元素方法
几种php教程 删除数组元素方法在很多情况下我们的数组会出现重复情况,那我们删除数组中一些重复的内容怎么办,这些元素我必须保持他唯一,所以就想办法来删除它们,下面利用了遍历查询来删除重复数组元素的几种 ...
- 根据数组下标在MongoDB中修改数组元素
如下图这样的数据: 即文档中某个字段是一个数组,而每个数组元素又是一个对象,现在需求是对每个对象中的content字段值作情感分析后,把情感分析得到的结果增加到这个对象中去. 如上图中第1个元素,修改 ...
- 095-PHP遍历关联数组，并修改数组元素值
<?php $arr=array('I'=>1,'II'=>2,'III'=>3,'IV'=>4,'V'=>5); //定义一个数组 echo '修改之前数组信息: ...
- problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
- Vue中数组元素被替换，页面没有动态展示
原始代码 页面没有相应goodsList替换,打印goodsList数据已经被替换: (借用https://www.cnblogs.com/belongs-to-qinghua/p/11112613. ...
- vue的数组如何存储数据
vue 和 angular 还有有些区别的, 比如,vue中的数组数据改变后,view并没有发生改变,angular就不会这样. 所以VUE 在数组扩展方法中提供以了一个新的API arr.$set( ...
- NSMutableArray 删除可变数组元素
平时使用 NSMutableArray 中经常用到遍历删除数组元素的问题.一般第一个想法是使用一下 forin 就解决了,但是老司机都会知道使用 forin 做删除操作的时候会 crash.报错的原因 ...
- Vue方法中修改数组某一项元素而不能响应式更新
<template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
随机推荐
- 3种jQuery弹出大图效果
本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...
- htmilunit-- 针对抓取js生成的数据
public static String getHtml(String html){ // 模拟一个浏览器 @SuppressWarnings("resou ...
- 有关MongoDB数据库设计的问题
问题一:是否collection越少越好,尽量把关系数据库中分表表示的关系嵌套进文档里?问题二:如果这样的话,一句SQL能搞定的复杂查询,mongodb也许要查询多次.mongodb的查询速度是否还比 ...
- 小M的作物 最大权闭合子图
题目大意 bzoj 3438 两个田\(A,B\) \(n\le 1000\)种作物的种子 第\(i\)个种子,种\(A\)价值\(a[i]\),种\(B\)价值\(b[i]\) 再给出\(m\)个子 ...
- [agc014d] Black and White Tree（玄学树D）
Description 有一颗n个点的树,刚开始每个点都没有颜色. Alice和Bob会轮流对这棵树的一个点涂色,Alice涂白,Bob涂黑,Alice先手. 若最后存在一个白点,使得这个白点所有相邻 ...
- FOR XML PATH 语句的应用【所有列值显示在一行中】
原文发布时间为:2010-10-20 -- 来源于本人的百度文章 [由搬家工具导入] 大家都知道在SQL Server中利用 FOR XML PATH 语句能够把查询的数据生成XML数据，下面是它的一 ...
- 解决Navicat 报错:1130-host ... is not allowed to connect to this MySql server,MySQL不允许从远程访问的方法
1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 " ...
- 补不manjaro系统
昨天无意间看到:使用不同的主题时,使用midna图标时,关机的按钮和其他的不同,经过摸索,只需要更改替换3个图标即可: (1)进入目录/usr/share/icons/breeze/actions/t ...
- Linux 6.x 下Oracle 11g R2 安装配置
Oracle 11g R2 数据库安装硬件配置要求: 最小内存 1 GB of RAM 虚拟内存容量,这个oracle也有要求,不用担心此时的swap分区不够oracle的要求 .虚拟内存swap如何 ...
- hdu 3579(中国剩余定理+考虑0)
Hello Kiki Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...