调用方法：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. python第十四课--排序及自定义函数之案例一：选择排序

    案例一:选择排序使用选择排序的思想实现列表数据的升序排序 lt=[45,12,56,-32,-3,44,75,-22,100] length=len(lt) # print('排序前:'+str(lt ...

  2. Java阶段性总结与获奖感想

    一.获奖感想 这次能获得小黄衫,可以说是对我自己这半学期以来努力学习的一种肯定,也是激励我继续努力的动力. 首先,我要感谢给予我们耳目一新的学习方式的娄老师.我曾在我期望的师生关系中提到,我的高中班主 ...

  3. 在centos7上搭建博客之小白教程~

    原理 http使用方法一编译安装,php模块打入方式实现. 软件版本 在本次实验中,我们需要用到的软件版本如下: apr-1.6.2 apr-util-1.6.0 httpd-2.4.28 maria ...

  4. js之checkbox判断常用示例

    checkbox常用示例可参考: 关于checkbox自动选中 checkbox选中并通过ajax传数组到后台接收 MP实战系列(十三)之批量修改操作(前后台异步交互) 本次说的是,还是关于智能门锁开 ...

  5. 【转】Python数据处理（四舍五入、除法部分）

    转自:https://www.cnblogs.com/junyiningyuan/p/5338378.html 关于除法 传统除法 对两个整数进行除的运算,同时结果会舍去小数部分,返回一个整数.但如果 ...

  6. Qt在线/离线安装包下载网址和说明

    截至到2018年3月27日,Qt最新版本的安装需要使用在线安装工具:qt-unified-windows-x86-3.0.2-online.exe,该安装个工具的下载地址为: http://downl ...

  7. 700. Search in a Binary Search Tree

    # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): # self.val = ...

  8. python pyspark入门篇

    一.环境介绍: 1.安装jdk 7以上 2.python 2.7.11 3.IDE pycharm 4.package: spark-1.6.0-bin-hadoop2.6.tar.gz 二.Setu ...

  9. 澄清以及半AOer的日常

    我是不是应该澄清什么事情-- 首先--我这个傻狗退役了--指的是退本赛季而不是本奥赛-- 其次--我喜欢天文是真的喜欢--但是至于为什么又滚回来OI了--大概是因为本校只对所谓"五大学科奥赛 ...

  10. Android攻城狮学习笔记—入门篇三

    第十章 CheckBox 与其他控件类似 有自己的监听方法 实现监听 并定义被选中或取消后的操作 第十一章 RadioGroup和RadioButton RadioGroup是RadioButton的 ...