调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <div id="app">

     <p v-for="(item,index)in list" :key="item.id" @click="btnClick(index,item.id)">

         {{item.message}}

     </p>

 </div>

 <script src="../../dist/vue.min.js"></script>

 <script>

     var vm2=new Vue({

         el:"#app",

         data:{

             list:[

                 {message:"星星",id:"1"},

                 {message:"太阳",id:"2"},

                 {message:"月亮",id:"3"}

             ]

         },

         methods:{

             btnClick(index,id){

                 this.$set(this.list,index,{message:"小猫",id:id});

             }

         }

     });

 </script>

 </body>

 </html>

vue处理循环列表动态数据问题的更多相关文章

  1. Vue之循环遍历Json数据，填充Table表格

    简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...

  2. vue中循环时动态绑定值

    在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ...

  3. 一个vue的循环列表，里面的按钮的移入事件

    需求:移入的时候,互相关注变成取消关注 移入移出事件传参$event,把这个参数打印出来看就可以搞定,而不是移入的时候,文本都改变,只改变当前行 的文本 <p @mouseover=" ...

  4. vue v-on:click传递动态参数

    最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案, 新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案,居然也能解决这个问题,作此记录留待 ...

  5. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  6. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  7. vue+element-ui实现无限级动态菜单树

    使用vue+element-ui实现无限级动态菜单 该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件 搭建项目并 ...

  8. 第 2 篇：上手 Vue 展示 todo 列表

    作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...

  9. vue 之循环添加不同class

    在vue中按条件为class动态添加直接使用:class="[{ active: isActive }, errorClass]"之类的表达式就可以 但是如果我们要为一个循环列表按 ...

随机推荐

  1. 4-1 R语言函数 lapply

    #lapply函数 #可以循环处理列表中的每一个元素 #lapply(参数):lapply(列表,函数/函数名,其他参数) #总是返回一个列表 #sapply:简化结果 #结果列表元素长度均为1,返回 ...

  2. Hibernate三种状态；query查询；ResultTransformer转换为pojo对象；能够将query语句写在xml中；Criteria查询；ProjectionList总和/f分组等函数

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010026901/article/details/24256091 Session操作过程中的po ...

  3. Redis基本数据类型命令汇总

    前言   前阶段写Redis客户端作为学习和了解Redis Protocol,基本上把Strintg,List,Hash,Set,SortedSet五种基础类型的命令都写完了,本篇进行总结,也相当于复 ...

  4. ganache-cli

    安装: npm install -g ganache-cli@6.1.8 使用: userdeMacBook-Pro:~ user$ ganache-cli -m "success rifl ...

  5. 微信授权获取用户openid前端实现

    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活.   首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url   h ...

  6. ACP敏捷管理

  7. 记一次Apache Carbondata PR的经历

     前言 前段时间有幸接触到Apache Carbondata,试用过程中发现了一个小小的问题,并且又很快的定位到了问题.然后在社区群里反映了下,负责人问愿不愿意提个JIRA,PR,然后我在没有任何开源 ...

  8. AWVS使用手册

    目录: 0×00.什么是Acunetix Web Vulnarability Scanner ( What is AWVS?) 0×01.AWVS安装过程.主要文件介绍.界面简介.主要操作区域简介(I ...

  9. SEO优化上首页之搜索引擎蜘蛛Spider原理

    Spider,蜘蛛,又名网页网络爬虫.网络机器人,是按照一定策略不断抓取互联网网页的特定程序.蜘蛛抓回的页面创建索引后参与排名,等待用户检索.为了网站优化自然排名上首页,精灵儿工作室下面详细剖析Spi ...

  10. 基于Verilog的奇数偶数小数分频器设计

    今天呢,由泡泡鱼工作室发布的微信公共号“硬件为王”(微信号:king_hardware)正式上线啦,关注有惊喜哦.在这个普天同庆的美好日子里,小编脑洞大开,决定写一首诗赞美一下我们背后伟大的团队,虽然 ...