实例分析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 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
javascript实现左右缓动动画函数
Nov 25 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
DOM XPATH获取img src值的query
2013/09/23 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
python自带的http模块详解
2016/11/06 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
使用python实现ANN
2017/12/20 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
xml有哪些解析技术?区别是什么
2016/04/26 面试题
教师绩效工资方案
2014/02/01 职场文书
经典洗发水广告词
2014/03/13 职场文书
教师节宣传方案
2014/05/23 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
python实现批量移动文件
2021/04/05 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
海弦WR-800F
2022/04/05 无线电
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android