位置：首页 > 网络编程 > vue.js

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

人气：422 时间：2019-04-12

这篇文章主要为大家详细介绍了实例分析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循环列表动态数据的处理方法的全部内容，感谢大家对四海网的支持。

本文来自：http://www.q1010.com/184/6048-0.html

注：关于实例分析vue循环列表动态数据的处理方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：浅谈vue引用静态资源需要注意的事项

下一篇：在vue项目中正确使用iconfont的方法