v-for 数组响应式_陈平安"的博客-程序员秘密

技术标签: html5  vue.js  javascript  

v-for 数组响应式方法

1.push方法 从最后开始添加 可以添加多个
2.pop方法 删除最后一位
3.shitf方法 删除第一位
4.unshift方法 从头添加 可以添加多个
5.splice:删除元素/插入元素/替换元素
*6. sort 排序
7.reverse 反转
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <ul>
          <li v-for="item in letters">{
   {item}}</li>
          <button @click="btnClick">最后添加</button>
          <button @click="btn2Click">删除最后一位</button>
          <button @click="btn3Click">删除第一位</button>
          <button @click="btn4Click">从头添加</button>
          <button @click="btn5Click">splice</button>
          <button @click="btn6Click">排序</button>
          <button @click="btn7Click">反转</button>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                letters :['A','B','C','D','E']
            },
            methods: {
                //1.push方法 从最后开始添加  可以添加多个
                btnClick(){
                    this.letters.push('F');//  this.letters.push('F','G','I');
                },
                //2.pop方法 删除最后一位
                btn2Click(){
                    this.letters.pop();
                },
                //3.shitf方法 删除第一位
                btn3Click(){
                    this.letters.shift();
                },
                //4.unshift方法 从头添加 可以添加多个
                btn4Click(){
                    this.letters.unshift('A');
                },
                //5.splice:删除元素/插入元素/替换元素
                /* 删除元素:第二个参数传入你要删除几个元素 */
                 /* 替换元素 :第二个参数标识我们要替换几个元素,后面是用来替换的元素 */
                 /* 插入元素:第二个参数传入0 后面跟上要插入的元素 */
                btn5Click(){
                   /*  (1)
                   const start = 2;
                    this.letters.splice(start,this.letters.length-start); */
                   /*  this.letters.splice(1,2) */

                   /* 替换元素 */
                   /* this.letters.splice(1,3,'1','2','3') */
                   /* 插入元素 */
                   this.letters.splice(1,0,'a','b','c')
                },
                //6. sort 排序
                btn6Click(){
                    this.letters.sort();
                },
                //7.reverse  反转
                btn7Click(){
                    this.letters.reverse();
                },
            },
        })         
    
    </script>
</body>
</html>

这里要注意通过索引值修改数组中的元素不是响应式的

通过这个方式,VUE是不会监听的不会给你渲染DOM

示例

this.letters[0]= 'aaaa'

如果有这样需求的话我们可以通过splice方法

示例

this.letters[0](0,1,'aaaaaa')

或者通过vue.set进行修改

set(要修改的对象,索引值,修改后的值)

Vue.set(this.letters,0,‘aaaa’);

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_51627264/article/details/120481351

智能推荐

Ceph集群生产环境安装部署_ywq935的博客-程序员秘密_ceph生产环境部署

一、配置规划:二、部署1. ntp-server开启ntp服务:apt-get install ntp ntpdate ntp-docsystemctl enable ntpsystemctl start ntp2. ceph node三台node全部执行如下操作: 磁盘分区规划如顶部表格,按照规划写的磁盘划分脚本,分别在3台node上执行脚本:# cat ~...

python多次登录教务系统_python模拟登录URP教务系统评教_weixin_39554891的博客-程序员秘密

#-*-coding:utf-8-*-#python3.4 projietimport http.cookiejar, urllib.request,re,timeheader = {'Connection': 'Keep-Alive','Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8','Acce...

《C++Primer(第五版)》第六章课后习题答案_黄船的博客-程序员秘密_c++primer第五版第六章答案

6.1节练习6.1练习6.1:实参和形参的区别是什么?6.2练习6.2:请指出下列函数哪个有错误,为什么?应该如何修改这些错误呢?(a)int f(){string s;//...return s;}A:错误,s是string,无法成为int类型的返回变量。修改:string s; -&gt; int s=0;(b)f2(int i){/*...*/}A:错误,没有设定返回类型。void f2(int i){/*...*/}(c)int calc(int v1,

springsecurity认证与授权流程理解_Automannnn的博客-程序员秘密

1.前言 为了更好的理解springSecurity,这里对其认证与授权的流程做一个简单总结。2.springSecurity过滤器 具体可参考:Spring Security 实战干货:必须掌握的一些内置 Filter 以下是作的一些截图: 3.认证与授权流程图: 对于springSecurity的过滤器,我的理解是大致可以分为三类: 1.常规的过滤器,用于对http协议进行支持,如cors,xsrf,headerWri...

剑指offer面试题26:复杂链表的复制_Jade1921Q的博客-程序员秘密

题目:请实现函数ComplexListNode* Clone(ComplexListNode* pHead),复制一个复杂链表。struct ComplexListNode{ int m_nValue; ComplexListNode* m_pNext; ComplexListNode* m_pSibling;};思路:分三步,第一步复制对应结点在被复制结点后面,第二步连接

数字 1 的个数-耐心记录思路_BATTERIA的博客-程序员秘密

解法一:思考每一位为1时有多少个数。遍历每一位,分三种情况讨论:1、当前位的数大于1时当前位取1时的所有范围内数的个数=该位左侧的可选数*该位右侧的可选数此时左侧的可选数是包含0的,例如n=21345,当前位为3,左侧的数为21,左侧的可选数即为21+1右侧的可选数每位都可以选0-9,则总计为10的(右侧位数)次方,21345的例子中右侧的可选数就为10的平方2、当前位的数等于0时和第一种情况类似,但是此时左侧的可选数是不包含0的。例如n=21345,当前位为3,左侧的数为21,..

随便推点

ros文件服务器,ros设置_服务器应用_Linux公社-Linux系统门户网站_姚朝明的博客-程序员秘密

ros设置[日期:2006-10-10]来源:作者:[字体:大 中 小]如果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的!我将告诉你怎样通过HTML表单来储存这些文件,怎样访问和使用这些文件。本文概述:在mysql中建立一个新的数据库一个怎样储存文件的例子程序一个怎样访问文件的例子程序在mysql中建立一个新的database首先,你...

HLS直播(M3U8)回看和下载功能的实现_码农突围的博客-程序员秘密

流媒体始终是大众生活娱乐最为重要的一个部分,同时也是技术开发中比较有难度的,尤其是直播,不仅功能是点播无法替代的,开发难度也要比点播大,里约奥运会等重大体育赛事大家只能通过直播观看比赛,体会现场观看的紧张和刺激,点播是无法做到的。如今我们也会有直播回看和下载的需求,一些APP包括我们自己的项目也已经实现了这些功能,网上讲解这部分技术的知识相对较少,而且有很多都不是很靠谱,我这里抛砖引玉,给大家提...

小程序实现带索引的城市列表_小马总的博客-程序员秘密_城市索引

效果一、城市数据{"A":[{"id":"210300","name":"鞍山","fullName":"鞍山市","initialsName":"A"},{"id":"340800","name":"安庆","fullName":"安庆市","initialsName":"A"},{"id":"410500","name":"安阳","fullName":"安阳市","initia...

【第十篇】Thymeleaf模板引擎_sunnyday0426的博客-程序员秘密_thymeleaf模板引擎

1.1 模板引擎前端交给我们的页面,是html页面。如果是我们以前开发,我们需要把他们转成jsp页面,jsp好处就是当我们查出一些数据转发到JSP页面以后,我们可以用jsp轻松实现数据的显示,及交互等。jsp支持非常强大的功能,包括能写Java代码,但是呢,我们现在的这种情况,SpringBoot这个项目首先是以jar的方式,不是war,像第二,我们用的还是嵌入式的Tomcat,所以呢,他现在默认是不支持jsp的。那不支持jsp,如果我们直接用纯静态页面的方式,那给我们开发会带来非常大的麻烦,那怎么办

Mac PS 之 简单去除背景并设置背景透明,变更图片宽高。。。_HLQ_Struggle的博客-程序员秘密

LZ-Says:技术无极限,领略独特美前言古人云:嘴大吞天下。话说,接到写页面需求后,又发现自己找图,瞬间很是茫然,很是凌乱。进过大佬解释,感觉单纯仅仅会一门不精通的手艺在未来势必寸步难行,还好,有小家伙帮忙,算是忙碌中完成了 PS 首战。特此记录。接到需求如下:将找到的图片背景调整为透明;调整图片宽高下面一起来看。PS 首战首先,LZ 使用 PS 版本如下...

K8s CNI网络最强对比:Flannel、Calico、Canal和W_来自文家市的那个小孩的博客-程序员秘密

介 绍网络架构是Kubernetes中较为复杂、让很多用户头疼的方面之一。Kubernetes网络模型本身对某些特定的网络功能有一定要求,但在实现方面也具有一定的灵活性。因此,业界已有不少不同的网络方案,来满足特定的环境和要求。CNI意为容器网络接口,它是一种标准的设计,为了让用户在容器创建或销毁时都能够更容易地配置容器网络。在本文中,我们将集中探索与对比目前最流行的CNI插件:Flannel、Calico、Weave和Canal(技术上是多个插件的组合)。这些插件既可以确保满足Kuberne.

推荐文章

热门文章

相关标签