Vue小案例——Tab选项卡

HTML 结构

    <div id="app">
        <div class="tab">
            <!--  tab栏  -->
            <ul>
                <li class="active">早</li>
                <li class="">中</li>
                <li class="">晚</li>
            </ul>
              <!--  对应显示的图片 -->
            <div class="current"><img src="imgs/早.png"></div>
            <div class=""><img src="imgs/中.png"></div>
            <div class=""><img src="imgs/晚.png"></div>
        </div>
    </div>

CSS 样式

        ul,li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .tab ul {
        /* 清除浮动 */
            overflow: hidden;
        }
        .tab ul li{
            height: 50px;
            width: 100px;
            line-height: 50px;
            float: left;
            border: 1px solid blue;
            text-align: center;
        }
        .active {
        /* 选中的Tab背景变蓝 */
            background-color: blue;
        }
        .tab div img{
            height: 500px;
            display: none;
        }
        .current {
        /* 选中的Tab对应的图片显示 */
            display: block!important;
        }

提供的数据

	items: [{
	    Id: 1,
	    Tab: '早',
	    Img: 'imgs/早.jpg'
	},
	{
	    Id: 2,
	    Tab: '中',
	    Img: 'imgs/中.jpg'
	},
	{
	    Id: 3,
	    Tab: '晚',
	    Img: 'imgs/晚.jpg'
	}],

把数据渲染到页面

• 把 data 中 items 中的Tab利用 v-for 循环渲染到页面上
• 把 data 中 items 中的Img利用 v-for 循环渲染到页面上

    <div id="app">
        <div class="tab">
            <!--  tab栏  -->
            <ul>
                <!--  
                    - 把 data 中 Tab  利用 v-for 循环渲染到页面上 
                    - 把 data 中 Img利用 v-for 循环渲染到页面上 
                        1、绑定key的作用 提高Vue的性能 
                        2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ，
                            index 也是唯一的 
                        3、 item 是 数组中对应的每一项  
                        4、 index 是 每一项的 索引
                -->
                <li :key = 'item.Id' v-for = 'item in items'>{{item.Tab}}</li>
            </ul>
            <!--  对应显示的图片 -->
            <!-- 
                通过v-bind(可以简写成:)绑定src属性 
            -->
            <div :key = 'item.Id' v-for = 'item in items'><img :src='item.Img'></div>
        </div>
    </div>
    <script type="text/javascript">
        const Vm = new Vue({
            el: '#app',
            //所需要的数据
            data: {
                items: [{
                    Id: 1,
                    Tab: '早',
                    Img: 'imgs/03.jpg'
                },
                {
                    Id: 2,
                    Tab: '中',
                    Img: 'imgs/01.jpg'
                },
                {
                    Id: 3,
                    Tab: '晚',
                    Img: 'imgs/02.jpg'
                }],
            },
        });
    </script>

给每一个tab栏添加事件,并让选中的高亮

• 让默认的第一项tab栏高亮

  • tab栏高亮 通过添加类名active 来实现 （CSS active 的样式已经提前写好）
    • 在data 中定义一个 默认的 索引 currentIndex 为 1
    • 给第一个li 添加 active 的类名
      • 通过动态绑定class 来实现 第一个li 的id为 1 和 currentIndex 的值刚好相等
      • currentIndex === index 如果相等 则添加类名 active 否则 添加 空类名

• 让默认的第一项tab栏对应的div 显示

  • 实现思路 和 第一个 tab 实现思路一样 只不过 这里控制第一个div 显示的类名是 current
    点击每一个tab栏 当前的高亮 其他的取消高亮

• 给每一个li添加点击事件

  • 让当前的索引 index 和 当前 currentIndex 的 值 进项比较

  • 如果相等 则当前li 添加active 类名 当前的 li 高亮 当前对应索引的 div 添加 current 当前div 显示 其他隐藏

    <div id="app">
        <div class="tab">
            <!--  tab栏  -->
            <ul>
                <!--  
                    - 把 data 中 Tab  利用 v-for 循环渲染到页面上 
                    - 把 data 中 Img利用 v-for 循环渲染到页面上 
                        1、绑定key的作用 提高Vue的性能 
                        2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ，
                            index 也是唯一的 
                        3、 item 是 数组中对应的每一项  
                        4、 index 是 每一项的 索引
                    - 给每个Tab添加点击事件
                -->
                <li :key = 'item.Id' v-for = 'item in items' @click='Fcurrent(item.Id)' :class='currentIndex == item.Id?"active":""'>{{item.Tab}}</li>
            </ul>
            <!--  对应显示的图片 -->
            <!-- 
                通过v-bind(可以简写成:)绑定src属性 
                将currentIndex = item.Id的图片显示
            -->
            <div :key = 'item.Id' v-for = 'item in items'><img :class='currentIndex == item.Id?"current":""' :src='item.Img'></div>
        </div>
    </div>
    <script type="text/javascript">
        const Vm = new Vue({
            el: '#app',
            //所需要的数据
            data: {
                items: [{
                    Id: 1,
                    Tab: '早',
                    Img: 'imgs/早.jpg'
                },
                {
                    Id: 2,
                    Tab: '中',
                    Img: 'imgs/中.jpg'
                },
                {
                    Id: 3,
                    Tab: '晚',
                    Img: 'imgs/晚.jpg'
                }],
                current:'current',
                active:'active',
                currentIndex: 1,
            },
            methods: {
                Fcurrent: function(currentIndex) {
                    this.currentIndex = currentIndex;
                }
            },
        });
    </script>