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

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

回复
阅读 7.4k
5 个回答
✓ 已被采纳

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

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

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

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

试试转变下思路

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

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

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

<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;
        })
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏