v-for循环写tab组件小案例

展示:

v-for循环写tab组件小案例


简单的一个小案例,css文件这么easy就不贴了吧,也没啥样式。

	<div id="app">
	
	//  循环两次,一次是button,一次是内容框div。
	//  @click="changeTab(index)"   点击按钮触发changeTab事件,将当前被点击按钮的index(下标)传过去
	//  :class="{active:clickIndex==index}"   当clickIndex==index为true时,button的class有active这个属性

        <button v-for="(item,index) in arr" @click="changeTab(index)" :class="{active:clickIndex==index}">
            {{item.btn}}
        </button>
        
        //  v-show="clickIndex==index"  当v-show的值为true时,div显示,false时为假时,div隐藏。
        //  clickIndex的值在下面changeTab方法中获得值为当前的button下标,
        //  clickIndex==index button和div的下标对应   意思就是  当前的button    ====》   显示当前div
        <div v-for="(item,index) in arr" v-show="clickIndex==index">
            {{item.content}}
        </div>
    </div>
<script>
        const vm = new Vue({
            el: '#app',
            data: {
                arr: [{
                        btn: '栏目一',     //  按钮的文本内容
                        content: '内容一'   //  div的文本内容
                    },
                    {
                        btn: '栏目二',
                        content: '内容二'
                    },
                    {
                        btn: '栏目三',
                        content: '内容三'
                    }
                ],
                clickIndex: 0
            },
            methods: {
            //  为什么要传参?
            //  传的这个参数是当前点击button的下标index,因为按下按钮下面的div就显示第几个,
           //   所以要获取button的下标。将button的下标赋值给clickIndex 数据。
                changeTab(index) {
                    this.clickIndex = index
                    console.log(this.index)
                }
            }
        })
    </script>
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

chenyou123_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值