调用方法：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. AOP的具体实践-简化结果返回的处理

    原因: 以前学习Spring的时候着重学习过AOP概念,但是一直也没有用上,唯一碰到过的就是Spring内置的事务管理.现在碰到过一些结果后面的操作适合用到,所以这里就拿出来用一下,并且复习一下落下的 ...

  2. 【原创】Apache ab测试时出现：apr_socket_recv "connection reset by peer" 104

    今天在用Apache自带的ab工具做以下简单的压测,本来是随便填几个参数,发现ab在1000并发以上报错:apr_socket_recv "connection reset by peer& ...

  3. C#软件授权、注册、加密、解密模块源码解析并制作注册机生成license

    最近做了一个绿色免安装软件,领导临时要求加个注册机制,不能让现场工程师随意复制.事出突然,只能在现场开发(离开现场软件就不受我们控了).花了不到两个小时实现了简单的注册机制,稍作整理.        ...

  4. Golang包管理工具glide简介

    Golang包管理工具glide简介 前言 Golang是一个十分有趣,简洁而有力的开发语言,用来开发并发/并行程序是一件很愉快的事情.在这里我感受到了其中一些好处: 没有少了许多代码格式风格的争论, ...

  5. 怎样批量提取JPG照片的文件名

    用批处理做吧, @echo off dir /a-d /b >./list.txt 把上面两句代码用记事本保存为“list.bat”(不要引号) 然后把这个文件放到你要提取文件名的文件夹里,就是 ...

  6. [国家集训队]小Z的袜子

    嘟嘟嘟 一眼就知道是莫队. 还不带修改,美滋滋. 按莫队的方法排序,然后用小学数学算一下概率,分子分母单独维护. #include<cstdio> #include<iostream ...

  7. Kubernetes 初探

    一.容器: 1. 容器是运行一个或一组进程的方法,使得这些进程和主机上其他进程相隔离 2. 容器类似于虚拟机,但不同于虚拟机 容器                                    ...

  8. 论文笔记 Robust face landmark estimation under occlusion

    1. Abstract 现实世界中的人脸很多时候都存在遮挡以及大的形状变化,而目前的人脸关键点检测方法在这种情况下表现欠佳, 因为它们未能提供一种系统的方法来处理异常.因而authors提出一种新的方 ...

  9. Python学习笔记系列——高阶函数（map/reduce）

    一.map #变量可以指向函数,函数的参数能接受变量,那么一个函数就可以接受另一个函数作为参数,这种函数被称之为高阶函数 def add(x,y,f): return f(x)+f(y) print( ...

  10. C#引用比较和内容比较

    1.静态方法Object.ReferenceEqual,实际实现为引用比较.   2.静态方法Object.Equal, 实际实现为引用比较.(实际调用了实例方法Equal)   3.Object实例 ...