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 的 v-model用法实例
Nov 23 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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中文汉字验证码
2007/04/08 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
农民入党思想汇报
2014/01/03 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
学用政策心得体会
2014/09/10 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
2016年少先队活动总结
2016/04/06 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python