vue vant-ui 商品详情页tab切换内容

<van-tabs @click="goodDetailTab">
           <van-tab v-for="item in navArr" :title="item.name" :key="item.name">
              <div></div>
           </van-tab>
        </van-tabs>

  data(){
     return{
        navArr:[
          {
            name:"商品"
          },
          {
            name:"详情"
          },
          {
            name:"评论"
          }
        ]
     }
   }

vant-tab的连接:https://youzan.github.io/vant…
它的例子是循环数字,我要做的是一个商品详情页,顶部tab有商品、详情、评论三个标签,点击不同的标签,下面切换不同的内容div,这个应该怎么写呢?

回答:

可以直接写啊,可以不用for.

<van-tabs :active="active">
      <van-tab>
        <div slot="title">商品</div>
        <div>商品情况</div>
      </van-tab>
      <van-tab>
        <div slot="title">详情</div>
        <div>详情内容</div>
      </van-tab>
      <van-tab>
        <div slot="title">评论</div>
        <div>评论内容</div>
      </van-tab>
    </van-tabs>
  export default {
  data () {
    return {
      active: 1
    }
  }
}

回答:

直接再定义一个变量例如act,设定值为当前打开页,使用v-model绑定这个值。点击的时候获取当前页面的值并替换成为act的值即可,望采纳

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注