示例代码

<!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修改数组元素方法的更多相关文章

  1. 几种php 删除数组元素方法

    几种php教程 删除数组元素方法在很多情况下我们的数组会出现重复情况,那我们删除数组中一些重复的内容怎么办,这些元素我必须保持他唯一,所以就想办法来删除它们,下面利用了遍历查询来删除重复数组元素的几种 ...

  2. 根据数组下标在MongoDB中修改数组元素

    如下图这样的数据: 即文档中某个字段是一个数组,而每个数组元素又是一个对象,现在需求是对每个对象中的content字段值作情感分析后,把情感分析得到的结果增加到这个对象中去. 如上图中第1个元素,修改 ...

  3. 095-PHP遍历关联数组，并修改数组元素值

    <?php $arr=array('I'=>1,'II'=>2,'III'=>3,'IV'=>4,'V'=>5); //定义一个数组 echo '修改之前数组信息: ...

  4. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  5. Vue中数组元素被替换，页面没有动态展示

    原始代码 页面没有相应goodsList替换,打印goodsList数据已经被替换: (借用https://www.cnblogs.com/belongs-to-qinghua/p/11112613. ...

  6. vue的数组如何存储数据

    vue 和 angular 还有有些区别的, 比如,vue中的数组数据改变后,view并没有发生改变,angular就不会这样. 所以VUE 在数组扩展方法中提供以了一个新的API arr.$set( ...

  7. NSMutableArray 删除可变数组元素

    平时使用 NSMutableArray 中经常用到遍历删除数组元素的问题.一般第一个想法是使用一下 forin 就解决了,但是老司机都会知道使用 forin 做删除操作的时候会 crash.报错的原因 ...

  8. Vue方法中修改数组某一项元素而不能响应式更新

    <template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...

  9. vue遍历数组和对象的方法以及他们之间的区别

    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组   1,使用vue数组变异方法 pop() 删除数组最后一 ...

随机推荐

  1. 习题：玛丽卡（SPFA）

    玛丽卡(wikioi1021) [题目描述 ]麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复.因为她和他们不住在同一个城市,因此她开始准备她的长途旅行.在这个国家中每两个城市之间最多只有一条路相通, ...

  2. HDU 1824 Let's go home（2-SAT+Tarjan）

    Let's go home Time Limit: 10000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  3. 【09】react 之 表单组件

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  4. 【CF1016C】Vasya And The Mushrooms（模拟）

    题意:给定一个2*n的矩阵,每一个点有一个权值,从左上角出发,时间t=0开始,连续的走,将矩阵走完, 每走一步,t++,并且得到t*当前格子的权值的值,求最大的权值和 n<=3e5,1<= ...

  5. 【CF1073D】Berland Fair（模拟）

    题意:初始有t元,每次从1开始买,从1到n依次有n个人,每个人的东西价格为a[i],该人依次能买就买,到n之后再回到1从头开始,问最后能买到的东西数量 n<=2e5,t<=1e18,a[i ...

  6. requireJs杂项

    如果设置了baseUrl,那么baseUrl目录下的模块可以被加载,那么被加载之后的模块Id是什么?文件名吗?     入口函数的写法?是不是要执行,后面加()   中文网中指的优化工具是什么?   ...

  7. Android使用圆角

    圆角Button 效果图 绿色Button 定义button_green.xml资源文件位于drawable文件夹下,可用作button的background属性 button_green.xml: ...

  8. asp.net mvc 5 利用ActionFilterAttribute实现权限过滤

    关于c#属性的教程:http://www.runoob.com/csharp/csharp-attribute.html 在asp.net mvc5中,可以利用ActionFilterAttribut ...

  9. 大话Spark(4)-一文理解MapReduce Shuffle和Spark Shuffle

    Shuffle本意是 混洗, 洗牌的意思, 在MapReduce过程中需要各节点上同一类数据汇集到某一节点进行计算,把这些分布在不同节点的数据按照一定的规则聚集到一起的过程成为Shuffle. 在Ha ...

  10. 怎样在 CentOS 7.0 上安装和配置 VNC 服务器

    这是一个关于怎样在你的 CentOS 7 上安装配置 VNC 服务的教程.当然这个教程也适合 RHEL 7 .在这个教程里,我们将学习什么是 VNC 以及怎样在 CentOS 7 上安装配置 VNC ...