vue tabs手写方法

HTML 部分
 <div class="left-tab">
          <div class="hd">
            <div :class="{'cur': now === '1'}" @click="now = '1'">广利河西五路</div>
            <div :class="{'cur': now === '2'}" @click="now = '2'">广利河北二路</div>
            <div :class="{'cur': now === '3'}" @click="now = '3'">广利河黄河路</div>
            <div :class="{'cur': now === '4'}" @click="now = '4'">东营河庐山路</div>
            <div :class="{'cur': now === '5'}" @click="now = '5'">五六干合排西路五六干合排西路五六干合排西路</div>
          </div>
      
 </div>
 
<div class="topleft-right">
        <div class="bd">
          <div v-show="now === '1'">1</div>
          <div v-show="now === '2'">2</div>
          <div v-show="now === '3'">3</div>
          <div v-show="now === '4'">啊士大夫的</div>
          <div v-show="now === '5'">手动阀手动阀</div>
        </div>
</div>
 
JS  VUE部分   
 
export default{  
 data() {
  return {
 now: "1"
}
}  
}
 
posted @   小猴子会上树  阅读(969)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示