实例分析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 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
js获取php变量的实现代码
Aug 10 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
深入理解Antd-Select组件的用法
Feb 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
php zend解密软件绿色版测试可用
2008/04/14 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP制作万年历
2015/01/07 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
用Python设计一个经典小游戏
2017/05/15 Python
教你学会使用Python正则表达式
2017/09/07 Python
用matplotlib画等高线图详解
2017/12/14 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python中eval与int的区别浅析
2019/08/11 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
关于读书的演讲稿
2014/05/07 职场文书
求职信内容怎么写
2014/05/26 职场文书
公司踏青活动方案
2014/08/16 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server