实例分析vue循环列表动态数据的处理方法


Posted in Javascript onSeptember 28, 2018

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

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

key:要更改的具体数据

value :重新赋的值

<!DOCTYPE html>
<html>
<head>
  <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循环列表动态数据的处理方法的全部内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
js实现移动端图片滑块验证功能
Sep 29 Javascript
js隐式转换的知识实例讲解
Sep 28 #Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 #Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 #Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 #Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 #Javascript
学习jQuery中的noConflict()用法
Sep 28 #jQuery
代码分析vue中如何配置less
Sep 28 #Javascript
You might like
PHP可变函数的使用详解
2013/06/14 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
javascript模块化简单解析
2016/04/07 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
计算机求职信
2013/12/01 职场文书
房屋租赁意向书
2014/04/01 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
简易版租房协议书范本
2014/10/13 职场文书
中秋客户感谢信
2015/01/22 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
拉贝日记观后感
2015/06/05 职场文书
优秀员工演讲稿
2019/06/21 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript