实例分析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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 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里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
php错误日志简单配置方法
2016/07/11 PHP
微信支付开发交易通知实例
2016/07/12 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
python threading模块操作多线程介绍
2015/04/08 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
员工试用期考核自我鉴定
2014/04/13 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB