vue处理循环列表动态数据问题
程序员文章站
2022-06-29 12:43:03
调用方法：Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值 ......
调用方法：vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
1 <!doctype html>
2 <html>
3 <head lang="en">
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <div id="app">
10 <p v-for="(item,index)in list" :key="item.id" @click="btnclick(index,item.id)">
11 {{item.message}}
12 </p>
15 </div>
16
17 <script src="../../dist/vue.min.js"></script>
18 <script>
19 var vm2=new vue({
20 el:"#app",
21 data:{
22 list:[
23 {message:"星星",id:"1"},
24 {message:"太阳",id:"2"},
25 {message:"月亮",id:"3"}
26 ]
27 },
28 methods:{
29 btnclick(index,id){
30 this.$set(this.list,index,{message:"小猫",id:id});
31 }
32 }
33 });
34 </script>
35 </body>
36 </html>
推荐阅读
-
实例分析vue循环列表动态数据的处理方法
-
vue动态删除从数据库倒入列表的某一条方法
-
解决vue动态为数据添加新属性遇到的问题
-
关于vue v-for循环解决img标签的src动态绑定问题
-
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
-
Vue.js实现简单动态数据处理
-
vue对storejs获取的数据进行处理时遇到的几种问题小结
-
datatable的部分问题处理(动态定义列头，给某行添加事件，初始显示空数据)
-
vue处理循环列表动态数据问题
-
vue,element列表大数据卡顿问题,vue列表渲染慢，element表格渲染慢，表格渲染慢（卡），表格全选卡