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使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue里使用create, mounted调用方法
Apr 26 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 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
探讨php中header的用法详解
2013/06/07 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
js闭包学习心得总结
2018/04/17 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
使用Python来开发微信功能
2018/06/13 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
大学校庆邀请函
2014/01/11 职场文书
歌唱比赛主持词
2014/03/18 职场文书
社区科普工作方案
2014/06/03 职场文书
签约仪式致辞
2015/07/30 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python