vue中,点击不同的按钮显示不同的内容,一个按钮对应一条内容,显示一条内容时其他内容隐藏,这怎么实现

`<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...
到底该怎么处理


修改

image.png

按钮
`<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
image.png

要在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

回答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
  • @

    设置一个变量curSoc 点击一个把响应的显示数据赋給它

    支持 0 反对 0 举报
    2021-11-27 06:55
  • @

    这些数据可以是放在同一个数组循环出来的吗?如果是的话,可以对应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