vue选项卡切换的实现案例


Posted in Vue.js onApril 11, 2022

直接上代码:

<!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.js 相关文章推荐
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
分享一个vue实现的记事本功能案例
vue代码分块和懒加载非必要资源文件
Apr 11 #Vue.js
vue打包时去掉所有的console.log
三种方式清除vue路由跳转router-link的历史记录
Apr 10 #Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 #Vue.js
vue实力踩坑之push当前页无效
Apr 10 #Vue.js
vue实现Toast组件轻提示
Apr 10 #Vue.js
You might like
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
js控制的遮罩层实例介绍
2013/05/29 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python引用计数操作示例
2018/08/23 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python模拟斗地主发牌
2020/04/22 Python
Django之腾讯云短信的实现
2020/06/12 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
python实现粒子群算法
2020/10/15 Python
python调用百度API实现人脸识别
2020/11/17 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
园林设计师自荐信
2013/11/18 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
酒店节能降耗方案
2014/05/08 职场文书
房产协议书范本
2014/10/18 职场文书
教师党员自我评价2015
2015/03/04 职场文书
复兴之路展览观后感
2015/06/02 职场文书
建议书的格式及范文
2015/09/14 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
python flask框架快速入门
2021/05/14 Python
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python