个人中心
gpt4 book ai didi

浅谈vue 多个变量同时赋相同值互相影响

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 32 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章浅谈vue 多个变量同时赋相同值互相影响由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

首先，该项目用到了element-ui中的Tabs 标签；然后来龙去脉是酱紫的:

一个项目中需动态渲染一个列表billItemLIsts，列表中包含ｎ组小列表，其中小列表的state_pj用于改变该小列表中的radio，于是:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< el-tabs tab-position = "left" style = "max-height:280px;" >
   < el-tab-pane v-for = "(itema,index) in billItemLIsts" :key = "itema.id" :label = "itema.title" :value = "itema.id" >
   < ul class = "bill_set_ul" >
   < li v-for = "(subitem,subindex) in itema.item" :key = "subitem.id" :label = "subitem.title" :value = "subitem.id" >
   < div class = "el-form-item__label" >{{subitem.title}}:</ div >
   < div class = "el-form-item__content" style = "width:200px;margin-left: 100px;" >
    < el-radio-group v-model = "subitem.state_pj" @ change = "changeSub(index,subindex)" >
    < el-radio :label = "chargeIs" >计费</ el-radio >
    < el-radio :label = "chargeNo" >不计费</ el-radio >
    </ el-radio-group >
   </ div >
   </ li >
   </ ul >
   </ el-tab-pane >
  </ el-tabs >

那么现在列表效果达到了，然鹅这个tab得放到dialog中，且存在取消与确定操作，确定时不用多说，取消时改变了的radio是不会自己变成我们想要的样子，于是乎:

?
1
2
3
4
//最终的收费设置数据
billItemLIsts: [],
  //最终原始的收费设置数据
billItemLIstsOriginal: [],

没错现在billItemLIsts就可以随之怎么操作,因为我们有billItemLIstsOriginal记住了他最初的样子,

接下来就是付诸实际了

?
1
2
3
4
5
6
7
8
// 取消修改收费设置
cancleChargeSet() {
  this .billItemLIsts = this .billItemLIstsOriginal;
  if (! this .chargeOpenIs){
  this .chargingFunIs = 1;
  }
  
},

然并卵… 。

百思不得其解,他并没有发挥自己的作用 。

这是因为在Object赋值的时候，传递的不是值，而是引用，他们指向了同一个空间！ 。

搞清楚了原因就好下手啦 。

解决:

1.this.billItemLIsts = JSON.parse( JSON.stringify(this.billItemLIstsOriginal) ),

2.或使用 ES6 的解析语法 this.billItemLIsts = { ...this.billItemLIstsOriginal } 。

补充知识：VUE(ES6) 导出变量、常量，方法 。

在lib.js文件中， 使用 export{接口} 导出接口， 大括号中的接口名字为上面定义的变量， import和export是对应的； 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//lib.js 文件
let bar = "stringBar" ;
let foo = "stringFoo" ;
 
let fn0 = function () {
  console.log( "fn0" );
};
let fn1 = function () {
  console.log( "fn1" );
};
export{ bar , foo, fn0, fn1}
 
//main.js文件
import {bar,foo, fn0, fn1} from "./lib" ;
console.log(bar+ "_" +foo);
fn0();
fn1();

以上这篇浅谈vue 多个变量同时赋相同值互相影响就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/u011269388/article/details/105734695 。

最后此篇关于浅谈vue 多个变量同时赋相同值互相影响的文章就讲到这里了,如果你想了解更多关于浅谈vue 多个变量同时赋相同值互相影响的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

32 4 0
文章推荐： vant 自定义 van-dropdown-item的用法
文章推荐： 在Python中关于使用os模块遍历目录的实现方法
文章推荐： Python代码打开本地.mp4格式文件的方法
文章推荐： Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com