编程 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 相关文章推荐

jQuery EasyUI API 中文文档 - ComboTree组合树

Oct 11 Javascript

jquery选择器需要注意的问题

Nov 26 Javascript

解决jQuery ajax动态新增节点无法触发点击事件的问题

May 24 jQuery

MvcPager分页控件适用于Bootstrap

Jun 03 Javascript

JS实现给json数组动态赋值的方法示例

Mar 19 Javascript

利用node.js+mongodb如何搭建一个简单登录注册的功能详解

Jul 30 Javascript

详解在express站点中使用ejs模板引擎

Sep 21 Javascript

jqgrid实现简单的单行编辑功能

Sep 30 Javascript

qrcode生成二维码微信长按无法识别问题的解决

Apr 04 Javascript

整理 node-sass 安装失败的原因及解决办法(小结)

Feb 19 Javascript

在react中使用vue的状态管理的方法示例

May 02 Javascript

element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

Jul 27 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