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

Question

`<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] 这样

Answer 1

竟然写过这个组件。
你将要展示的按钮title和内容content组装成对象放到一个数组里。如：

list = [
    {title: '标题1', content: '内容1'},
    {title: '标题2', content: '内容2'}
]

然后data里用变量showIndex来控制哪个按钮内容显示。

模板部分
1.v-for循环渲染出按钮，点击按钮则改变showIndex的值
2.根据showIndex显示list[showIndex].content

Answer 2

试试转变下思路

<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;
    ...
}

Answer 3

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

Answer 4

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

Answer 5

<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;
        })
    }
}