实例分析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 ajax 登录验证实现代码
Sep 23 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
vscode 远程调试python的方法
2017/12/01 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
初二生物教学反思
2014/02/03 职场文书
美容院经理岗位职责
2014/04/03 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
元旦晚会活动总结
2014/07/09 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
店铺转让协议书
2014/12/02 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
python 闭包函数详细介绍
2022/04/19 Python
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript