实例分析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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
Iframe thickbox2.0使用的方法
Mar 05 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Prototype使用指南之ajax
2007/01/10 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
jquery获取radio值实例
2014/10/16 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
关于Python解包知识点总结
2020/05/05 Python
python解包概念及实例
2021/02/17 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
工会主席岗位责任制
2014/02/11 职场文书
应届生求职信范文
2014/06/30 职场文书
2014年终个人工作总结
2014/11/07 职场文书
邀请书模板
2015/02/02 职场文书
公司老总年会致辞
2015/07/30 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技