实例分析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 解析多维的Json数据格式
Nov 02 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
js检测用户输入密码强度
Oct 22 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
九种原生js动画效果
Nov 11 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
原生JS实现多条件筛选
Aug 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
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
菜单效果
2006/10/14 Javascript
javascript函数库-集合框架
2007/04/27 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
javascript数组去掉重复
2011/05/12 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
Vue 换肤的示例实践
2018/01/23 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
秘书英文求职信
2014/04/16 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB