调用方法：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. Maven实战（九）Maven仓库简介

    目录 一.作用 Maven仓库分为本地仓库和远程仓库,集中存放项目引用的jar包,无需将jar包放在程序中,结合Maven项目的pom.xml,使得项目管理jar包更容易,有以下几个优点: 对于项目来 ...

  2. python第十六课——外部函数and内部函数

    1.外部函数&内部函数 内部函数: 定义在某个函数的内部,就是内部函数: [注意事项]: 1).内部函数可以随意使用它外部函数中的内容 2).外部函数不能使用内部函数中的内容 3).内部函数不 ...

  3. oc消息转发：forwardInvocation、签名、参量个数、SEL 相关测试

    结论1.签名的参量类型伪造不正确会导致崩溃. 结论二.签名个数不对可能会导致参量丢失. 结论三:在签名配置正确的情况下,系统会将函数调用的所有信息打包到NSInvocation准备转发: - (voi ...

  4. 1483. [HNOI2009]梦幻布丁【平衡树-splay】

    Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色. 例如颜色分别为1,2,2,1的四个布丁一共有3段颜色. Input ...

  5. sql按月模糊查询

    select * from tb where convert(varchar(7),date,120) = '2011-05'

  6. Docker存储方式选型建议

    转自:https://segmentfault.com/a/1190000007168476 第一部分 问题诊断 事情从一次实施项目说起,我们需要帮助客户将他们的应用容器化并在数人云平台上发布此应用. ...

  7. virtualbox+vagrant学习-2(command cli)-25-Machine Readable Output

    Machine Readable Output机器可读的输出 每个vagrant命令都接受一个--machine-readable的标志,它支持机器可读的输出模式.在这种模式下,终端的输出被机器友好的 ...

  8. 移动端适配之sprite雪碧图背景定位

    移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...

  9. atom / vscode （配置c++环境流程）

    最初主要是被这个炫酷的插件吸引了,这么打代码太特么有激情了 还有跳舞的初音姐姐哦!! 现附上一篇文章,这篇文章步骤讲得很详细了 http://blog.csdn.net/qq_36731677/art ...

  10. 拥抱.NET Core系列：MemoryCache 缓存过期 （转载）

    阅读目录 MSCache项目 MSCache提供的过期方式 绝对时间到期 滑动时间到期 自定义过期策略 过期策略组合拳 缓存过期回调 写在最后 在上一篇”拥抱.NET Core系列:MemoryCac ...