实例分析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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
JS控制GIF图片的停止与显示
Oct 24 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
Zend Guard一些常见问题解答
2008/09/11 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
js实现导航跟随效果
2018/11/17 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
python海龟绘图实例教程
2014/07/24 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
中医专业应届生求职信
2013/11/17 职场文书
小区停车场管理制度
2014/01/27 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
高中家长意见怎么写
2015/06/03 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
详解JVM系列之内存模型
2021/06/10 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js