vue实现选项卡小案例

本文实例为大家分享了vue实现选项卡小案例的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    ul {
        list-style: none;
    }
    
    #app {
        width: 480px;
        margin: 20px auto;
        border: 1px solid cornflowerblue;
    }
    
    ul {
        width: 100%;
        overflow: hidden;
    }
    
    ul li {
        float: left;
        width: 160px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #cccccc;
    }
    
    ul li a {
        text-decoration: none;
        color: black;
    }
    
    p {
        height: 200px;
        text-align: center;
        line-height: 200px;
        background-color: #fff;
    }
    
    li.active {
        background-color: cornflowerblue;
    }
    /* 有这个类名的p标签，显示 */
    
    p.active {
        display: block;
    }
    
    img {
        width: 100%;
    }
</style>
 
<body>
    <div id="app">
        <ul>
            <!-- :class中可以写三元（index==cur?'active':''），也可以写方法  :class相当于v-bind:class  -->
            <!--使用for遍历li 要加上:key ，再添加一个点击事件-->
            <li :class="isActive(index)" v-for="(item,index) in list" :key="item.id" @click="toggle(index)">
                <!-- 通过插值把名字显示到页面 -->
                <a href="javascript:;" rel="external nofollow" >{{item.name}}</a>
            </li>
        </ul>
        <!-- v-show显示，index和cur一样才显示 -->
        <!--使用for遍历li 要加上:key ，再添加一个点击事件-->
        <p v-show="index==cur" v-for="(item,index) in list" :key="item.id">
            <!-- 只有用v-bind进行数据绑定 才能在src中使用item.img -->
            <img :src="item.img" alt="">
        </p>
    </div>
    <!-- 
    1.将所有的图片都隐藏
    2.默认第一个按钮有激活的样式
    3.点击哪一个按钮，给哪一个按钮添加激活样式
   -->
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            /* 数据 */
            data: {
                /* 定义一个显示元素的索引 */
                cur: 0,
                list: [{
                    id: 1,
                    name: "鞠婧祎",
                    img: "./img/1.jpg"
                }, {
                    id: 2,
                    name: "李沁",
                    img: "./img/2.jpg"
                }, {
                    id: 3,
                    name: "易烊千玺",
                    img: "./img/3.jpg"
                }]
            },
            methods: {
                /* 判断是否要激活 */
                isActive(index) {
                    return index == this.cur ? "active" : ""
                },
                //  点击li标签改变cur的值，实现切换效果
                // index是接受上面 @click中方法传递过来的index。
                toggle(index) {
                    this.cur = index
                }
            }
        })
    </script>
 
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中用动态组件实现选项卡切换效果

    最近在研究vue的路上,那么今天也算个学习笔记吧! 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"><router-link

  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • vuejs实现标签选项卡动态更改css样式的方法

    html <ul class="header-list"> <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}

  • Vue.js tab实现选项卡切换

    本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • vue动态组件实现选项卡切换效果

    本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g

  • vue中选项卡点击切换且能滑动切换功能的实现代码

    具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<

  • vue实现选项卡及选项卡切换效果

    vue实现选项卡及选项卡切换效果

    这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码.记住,通读Vue文档真的很重要,很重要! 这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急! 下面是一个样式稍微丑陋,但功能OK的选项卡. <!DOCTYPE html> <html> <head> <meta c

  • 使用vue.js写一个tab选项卡效果

    使用vue.js写一个tab选项卡效果

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti

  • vue插件tab选项卡使用小结

    vue插件tab选项卡使用小结

    本文实例为大家分享了vue插件tab选项卡的使用方法,供大家参考,具体内容如下 基本用法 <template> <tab :options="tabOpt" :state.sync="stateIndex"></tab> </template> <script type="text/babel"> import tab from 'components/tab_touch'; expor

随机推荐