实例分析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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
jQuery示例收集
Nov 05 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
通过Kettle自定义jar包供javascript使用
Jan 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获得当前的脚本网址
2007/12/10 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
小学庆六一活动方案
2014/02/28 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
政协工作总结2015
2015/05/20 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang