实例分析vue循环列表动态数据的处理方法

更新时间：2018年09月28日 15:07:52 投稿：laozhang

本篇文章给大家详细分享了关于vue循环列表动态数据的处理方法以及相关知识点内容，有需要的朋友们参考下。

调用方法：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循环列表动态数据的处理方法的全部内容，感谢大家对脚本之家的支持。

您可能感兴趣的文章:

vue跳转页面的几种常用方法代码示例
这篇文章主要给大家介绍了关于vue跳转页面的几种常用方法,vue跳转页面有好几种不同方法,文中通过代码将实现的方法介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10
用Vue-cli搭建的项目中引入css报错的原因分析
本篇文章主要介绍了用Vue-cli搭建的项目中引入css报错的原因分析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
el-menu递归实现多级菜单组件的示例
本文主要介绍了el-menu使用递归组件实现多级菜单组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
3种vue路由传参的基本模式
这篇文章主要为大家详细介绍了vue路由传参的3种基本模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-02-02
vue eslint简要配置教程详解
这篇文章主要介绍了vue eslint简要配置,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-07-07
利用Vue实现简易播放器的完整代码
这篇文章主要给大家介绍了关于如何利用Vue实现简易播放器的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
Vue vm.$attrs使用场景详解
这篇文章主要介绍了vm.$attrs使用场景详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue自定义指令实现元素滑动移动端适配及边界处理
这篇文章主要为大家介绍了vue自定义指令实现元素滑动移动端适配及边界处理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue3实现国际化的过程与遇到的问题详解
像很多大型的网址,特别是跨国际等公司网页,访问来自世界各地用户,所以网页的国际化极其重要的需求,这篇文章主要给大家介绍了关于vue3实现国际化的过程与遇到的问题的相关资料,需要的朋友可以参考下
2022-05-05
Vue中TypeScript和Pinia使用方法
这篇文章主要介绍了Vue中TypeScript和Pinia使用方法,让我们来看一个简单的示例来演示TypeScript 和 Pinia的强大之处，需要的朋友可以参考下
2023-07-07