`<div class="show-soc" v-if="showSoc">SOC:{{showSocData}}</div>`
<div class="show-Bms" v-if="showBms">SOC:{{showBmsData}}</div>
`handleShowSoc() { this.showSoc = true; this.showSocData = 11; },`
showBms的同时让soc不显示,但是不止要显示隐藏这两个,难道显示一个的时候设置其他的 显示都false吗,this.showxxx = false,this.showxxx = false...
到底该怎么处理
修改
按钮
`<div v-for="(item,index) in batteryDataList" :key="index">
<a-button @click="handleShowBattery(index)" type="primary" :size="size" block>{{item.btn}}</a-button> </div>`
`batteryDataList:[{
content:'', btn:'厂家版本' },{ content:'', btn:'BMS编码' },{ content:'111', btn:'电池编码' }, { content:[], btn:'SOC' }, { content:'222', btn:'组电状态' }, { content:'222', btn:'单体电压' },],`
这个是一个content中的数组showSocData
要在class="no1" class="no5" no9 这三个div中显示
`<div class="no1 window">
<span class="order">1</span> <img v-show="data1[12].value =='0(空位)' " src="../../assets/battery/cell_empty.png"> </div> <div class="no5 window"> <span class="order">5</span> <img v-show="data5[12].value =='0(空位)' " src="../../assets/battery/cell_empty.png"> </div> <div class="no9 window"> <span class="order">9</span> <img v-show="data9[12].value =='0(空位)' " src="../../assets/battery/cell_empty.png"> </div>`
div排列顺序如图,想这样命名class为了排序看得清楚
no1中是 showSocData[0] ,no9中是showSocData[8] 这样
已解决
悬赏分:0
- 解决时间 2021-11-27 19:24
点赞 0反对 0举报 0
收藏 0
分享 1
回答5
最佳
-
竟然写过这个组件。
你将要展示的按钮title和内容content组装成对象放到一个数组里。如:list = [ {title: '标题1', content: '内容1'}, {title: '标题2', content: '内容2'} ]
然后data里用变量showIndex来控制哪个按钮内容显示。
模板部分
1.v-for循环渲染出按钮,点击按钮则改变showIndex的值
2.根据showIndex显示list[showIndex].content支持 0 反对 0 举报2021-11-27 05:38
-
试试转变下思路
<div class="show-Bms bms-1" v-show="showType === 1">SOC:{{showBmsData}}</div> <div class="show-Bms bms-2" v-show="showType === 2">SOC:{{showBmsData}}</div> <div class="show-Bms bms-3" v-show="showType === 3">SOC:{{showBmsData}}</div> // 另外如果频繁切换建议使用 v-show handleShowSoc(type) { this.showType = type; ... }
支持 0 反对 0 举报2021-11-27 06:24
-
这些数据可以是放在同一个数组循环出来的吗?如果是的话,可以对应index控制:
dataList=[{ content:'111', btn:'按钮1' },{ content:'222', btn:'按钮2' }]
循环:
<div v-for="(item,index) in dataList"> <button @click="onClickItem(index)">{{btn}}</button> </div
点击事件里让curContent为dataList[index].content
支持 0 反对 0 举报2021-11-27 07:48
-
<div v-for="(item,index) in dataList"> <div v-show="currentIndex === index"> <button @click="onClickItem(index)">{{btn}}</button> </div </div> ... 代码省略 ... export default class Moudle extends Vue{ private currentIndex: any; private onClickItem(index: any){ this.$nextTick(()=>{ this.currentIndex = index; }) } }
支持 0 反对 0 举报2021-11-27 09:24