vue实现选项卡小案例

 更新时间:2022年04月11日 11:48:00   作者:清酒独酌  
这篇文章主要为大家详细介绍了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>

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

相关文章

  • vue超时计算的组件实例代码

    vue超时计算的组件实例代码

    这篇文章主要介绍了vue超时计算的组件实例代码,需要的朋友可以参考下
    2018-07-07
  • vue 实现弹窗关闭后刷新效果

    vue 实现弹窗关闭后刷新效果

    这篇文章主要介绍了vue 实现弹窗关闭后刷新效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue获取当前激活路由的方法

    vue获取当前激活路由的方法

    下面小编就为大家分享一篇vue获取当前激活路由的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解VUE单页应用骨架屏方案

    详解VUE单页应用骨架屏方案

    这篇文章主要介绍了详解VUE单页应用骨架屏方案,详细的介绍了什么是骨架屏以及是宪法方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue 实现接口进度条示例详解

    Vue 实现接口进度条示例详解

    这篇文章主要介绍了Vue实现接口进度条功能,在请求数据的过程中,需要添加监听函数来监测数据请求的过程变化,并更新组件相应的属性和界面元素,本文结合实例代码详细讲解,需要的朋友可以参考下
    2023-04-04
  • Vue中的事件处理详情

    Vue中的事件处理详情

    这篇文章主要介绍了Vue中的事件处理详情,文章通过给按钮绑定一个 click 事件展开详细内容介绍,需要的小伙伴可以参考一下
    2022-05-05
  • vue动态禁用控件绑定disable的例子

    vue动态禁用控件绑定disable的例子

    今天小编就为大家分享一篇vue动态禁用控件绑定disable的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Element InputNumber计数器的使用方法

    Element InputNumber计数器的使用方法

    这篇文章主要介绍了Element InputNumber计数器的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • webpack+vue.js构建前端工程化的详细教程

    webpack+vue.js构建前端工程化的详细教程

    这篇文章主要介绍了webpack+vue.js构建前端工程化的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • el-table渲染慢卡顿问题最优解决方案

    el-table渲染慢卡顿问题最优解决方案

    本文主要介绍了el-table渲染慢卡顿问题最优解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论