编程 Javascript

实例分析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循环列表动态数据的处理方法的全部内容，感谢大家对三水点靠木的支持。

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

- Author -

laozhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript字典探测用户名工具

Oct 05 Javascript

JS 控制CSS样式表

Aug 20 Javascript

javascript延时加载之defer测试

Dec 28 Javascript

原生JS可拖动弹窗效果实例代码

Nov 09 Javascript

JavaScript获取图片的原始尺寸以宽度为例

May 04 Javascript

Javascript实现可旋转的圆圈实例代码

Aug 04 Javascript

基于jQuery实现的仿百度首页滑动选项卡效果代码

Nov 16 Javascript

Javascript ES6中对象类型Sets的介绍与使用详解

Jul 17 Javascript

使用InstantClick.js让页面提前加载200ms

Sep 12 Javascript

JsChart组件使用详解

Mar 04 Javascript

如何通过JS实现转码与解码

Feb 21 Javascript

基于vue+echarts 数据可视化大屏展示的方法示例

Mar 09 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