vue.set进行数据绑定渲染到页面，可达到动态改变页面局部数且不用刷新页面

最新推荐文章于 2022-07-14 10:48:39 发布

橙之殇

最新推荐文章于 2022-07-14 10:48:39 发布

阅读量352

点赞数

分类专栏： H5/jquery/vue/layui 文章标签： vue.set 动态改变页面局部数据

本文链接：https://blog.csdn.net/qq_34626688/article/details/103178545

版权

H5/jquery/vue/layui 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

vue.set进行数据绑定渲染到页面==使用

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中set方法</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="(item,index) of num0" @click="btn(0)">
            {{item}}
        </div>
       </br>
       </br>
        <div v-for="(item,index) of userInfo0" @click="btn(1)">
            {{item.id}}--{{item.name}}--{{item.price}}
        </div>    
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
					userInfo0:[
					      {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg'},
					      {'id':'2','name':'男装','price':110,'num':1,'pic':'../static/img/2.jpg'},
					      {'id':'3','name':'童装','price':118,'num':2,'pic':'../static/img/3.jpg'}
					],
					userInfo1:[
					      {'id':'4','name':'男装','price':116,'num':1,'pic':'../static/img/1.jpg'},
					      {'id':'5','name':'童装','price':117,'num':1,'pic':'../static/img/2.jpg'},
					      {'id':'6','name':'男装','price':118,'num':2,'pic':'../static/img/3.jpg'},
					      {'id':'7','name':'女装','price':119,'num':2,'pic':'../static/img/3.jpg'}
					],
                	num0:[1,2,3,4],
                	num1:[5,6,7,8,9],
            },
            methods:{
            	btn:function(index){
            		if(index == 0){
            			for(var i = 0; i < this.num1.length;i++){
            				Vue.set(vm.num0,i,this.num1[i]);
            			}
            		}else{
            			this.userInfo0 = this.userInfo1;	//二维数组对象比以前长度多，必须先赋等，否则多出的部分会报错（找不到属性）而渲染不出来
            			for(var i = 0; i < this.userInfo1.length;i++){
            				Vue.set(vm.userInfo0[i],'id',this.userInfo1[i].id);
            				Vue.set(vm.userInfo0[i],'name',this.userInfo1[i].name);
            				Vue.set(vm.userInfo0[i],'price',this.userInfo1[i].price);
            				Vue.set(vm.userInfo0[i],'pic',this.userInfo1[i].pic);
            			}
            		}
            	},
            }
        });
    </script>
</body>
</html>

2.结果
1)点击前:
在这里插入图片描述
2)点击后:

在这里插入图片描述

橙之殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.set进行数据绑定渲染到页面，可达到动态改变页面局部数且不用刷新页面

vue.set进行数据绑定渲染到页面==使用1.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue中set方法</title> <script src="../vue.js"></s...
复制链接

扫一扫