实例分析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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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/11/01 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
php中apc缓存使用示例
2013/12/25 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JS前端加密算法示例
2016/12/22 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python类super()及私有属性原理解析
2020/06/15 Python
python switch 实现多分支选择功能
2020/12/21 Python
python 将Excel转Word的示例
2021/03/02 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
工程造价与管理专业应届生求职信
2013/11/23 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
成立公司计划书
2014/05/07 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书