调用方法：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. 关于Oracle11g R2的学习笔记

    进来由于工作需要开始有SQLServer向Oracle转型学习,想把学习写到这里作为记录和备忘.  Oracle 11g R2下面都简称:Oracle     第一:Oracle的安装 在安装过程没有 ...

  2. 1.1 What Is This Book About（这本书是关于什么的）

    CHAPTER 1 Preliminaries(预备知识) 1.1 What Is This Book About?(这本书是关于什么的) 这本书关心的是如何用Python对数据进行处理和清洗等操作. ...

  3. 1.4 Installation and Setup（安装和设置）

    1.4 Installation and Setup(安装和设置) 这里我们用Anaconda发行版作为Python的使用环境,推荐安装Python3.6,本书就是用Python3.6代码写成的.(译 ...

  4. 【bzoj 2839】集合计数

    权限题 根据广义容斥的套路就很好做了 设\(g_i\)表示交集至少有\(i\)个元素,\(f_i\)表示交集恰好有\(i\)个元素 显然有 \[g_i=\sum_{j=i}^n\binom{j}{i} ...

  5. selenium测试报告（含通过率统计图和失败截图）

    前言: 介绍的是含饼状统计图及失败截图的测试报告文件. 原文地址:https://testerhome.com/topics/9984 此版本增加了如下功能 测试报告完全汉化,包括错误日志的中文处理 ...

  6. Ubuntu下查看自己的GPU型号

    1.在命令行中输入:lspci 即可看到当前显卡型号. 2.Ubuntu 14.04 安装 Nvidia 私有驱动 sudo apt-get install nvidia-331 3.进行双显卡切换n ...

  7. 用kubeadm 搭建 高可用集群问题记录和复盘整个过程 - 通过journalctl -u kubelet.service命令来查看kubelet服务的日志

    1.根据  https://github.com/cookeem/kubeadm-ha/blob/master/README_CN.md  去搭建ha集群,遇到几个问题: runtime networ ...

  8. 使用Ceph集群作为Kubernetes的动态分配持久化存储（转）

    使用Docker快速部署Ceph集群 , 然后使用这个Ceph集群作为Kubernetes的动态分配持久化存储. Kubernetes集群要使用Ceph集群需要在每个Kubernetes节点上安装ce ...

  9. ASP.NET Core下载大文件的实现

    当我们的ASP.NET Core网站需要支持下载大文件时,如果不做控制可能会导致用户在访问下载页面时发生无响应,使得浏览器崩溃.可以参考如下代码来避免这个问题. 关于此代码的几点说明: 将数据分成较小 ...

  10. OO第一次博客作业总结反思

    使用了masteruml插件来生成类图和metrics插件分析代码 第一次作业 1.UML类图 >在第一次作业中,使用了两个类,代码中有没有使用的变量与函数,为平衡两个类的内容,我将输出函数放在 ...