文档章节

vue修改数组元素方法

o
 osc_z1hvg4cu
发布于 2018/04/24 14:44
字数 164
阅读 7
收藏 0

示例代码

<!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>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

pycurl libcurl link-time ssl backend (nss)

pip uninstall pycurlecho 'pycurl==7.19.5.1 --global-option="--with-nss"' > requires.pypip install -r requires.py...

小红手
33分钟前
17
0
计算机网络性能衡量

1、速率 单位时间(s)内传输信息(bit)量 单位:KB/s, MB/s, Gb/s K = 10^3 ,M = 10^6, G=10^9 一般表示的是理想的传输速率 2、带宽 计算机网络中的带宽和通信等领域的带宽概念不一样,计算机网...

osc_np3y0rbq
34分钟前
3
0
互联网掀起农家乐,巨头上演AI掘金战

配图来自Canva **前有网易、阿里AI养猪,后有腾讯AI养鹅,互联网大佬们纷纷玩起了“农家乐”,互联网的生意在尖端技术的引领之下频频跨界,巨头之间的较量也从线上延伸至线下。**自古“民以食...

osc_5cok9i01
35分钟前
9
0
原来!我在4年前就开始体验雾游戏了!

前有云游戏后有雾游戏,游戏的方式看来起来越来越多种多样。那么“震撼业界”的雾游戏到底是什么来头?它依靠什么改变游戏界?它的原理又是什么? 本月月初,著名的日本游戏杂志《Fami通》表...

osc_j34n26zn
36分钟前
11
0
活动预告|田溯宁与你相约GSMA Thrive·万物生晖,分享5G风口下的创新与投资洞察

在万物互联的时代背景下,5G+AI+IoT的技术变革与融合,正在引发一场深刻的全产业创新与变革。5G技术创新、行业应用及投资机遇已成为科技行业所瞩目的焦点。 6月30日,宽带资本董事长田溯宁将...

osc_0qnrwmy3
38分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部