实例分析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 继承实现方法
Aug 26 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
vue配置接口域名方法总结
May 12 Javascript
vue实现搜索功能
May 28 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
微信小程序收藏功能的实现代码
Jun 19 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
建立文件交换功能的脚本(二)
2006/10/09 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
图片完美缩放
2006/09/07 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
教师个人教学总结
2015/02/11 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
放飞理想主题班会
2015/08/14 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers