v-for列表实现选项卡切换进阶版

<div id="card">
    <div class="title">
        <span @click="num=key" :class="change(key)" v-for="title,key in title_list">{{title}}</span>
    </div>
    <div class="content">
        <span class="list" :class="change(key,‘active‘)" v-for="content,key in content_list">{{content}}</span>
    </div>
</div>

<script脚本代码>
    var card = new Vue({
        el:"#card",
        data:{
            num: 0,
            title_list:[
                "国内新闻",
                "国际新闻",
                "银河新闻"
            ],
            content_list:[
                "国内新闻列表",
                "国际新闻列表",
                "银河新闻列表"
            ]
        },
        methods:{
            change(data,style=‘current‘){
                if(this.num==data){
                    return style;
                }
            }
        }
    });
</script脚本代码>

  

这里要自己添加style样式,可以参考以上切换选项卡的文章里的样式配置

原文地址:https://www.cnblogs.com/eliwen/p/12031989.html

时间: 2024-10-12 20:01:45

v-for列表实现选项卡切换进阶版的相关文章

java集合框架小结(进阶版)之HashMap篇

基本概念: Hash(哈希):hash一般也译作“散列”.事实上,就是一个函数,用于直接定址.将数据元素的关键字key作为变量,通过哈希函数,计算生成该元素的存储地址. 冲突:函数是可以多对一的.即:多个自变量可以映射到同一函数值.一般而言,不同的key的hash值是不同的.在往hash表中映射的时候,不同的hash值可能映射到同一存储地址,这种情况被称为冲突. 解决冲突的方法: 1. 链表法:将冲突的各个元素用一个一维数组来维护.(java源码实现) 2. 开发寻址法:具体的有线性探测法.二次

js实现选项卡切换的三种方式

前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>tab切换</title> <style type="text/css

作业——tab切换简易版

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>tab切换简易版</title> 5 <meta charset="utf-8"> 6 <style> 7 body { margin:0; padding:0; font:normal 12px/1.5em "Microsoft Yahei", Verdana, Arial, Helvetic

慕课编程题JS选项卡切换

Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框样式的时候,JS里会出现大量CSS代码,所以统一使用className切换是更好的选择,不同的class样式可以在CSS文件中设置.这样JS的任务只剩下区分onclick元素和其他元素这一项了. 我的第一反应是给<p>内容部分加上房产/家居/二手房的id,通过if判断id是否与触发onclick选

基于jquery左侧带选项卡切换的焦点图

今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="film_focus"> <div class="film_focus_desc"> <h3> 标题1</h3> <ul class="film_focus_nav"> <li clas

基于jquery仿360网站图片选项卡切换代码

今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slides"> <div class="in widget-slide" data-jss="tabSelector : '.slide-nav li', viewSe

BZOJ 2243 染色 | 树链剖分模板题进阶版

BZOJ 2243 染色 | 树链剖分模板题进阶版 这道题呢~就是个带区间修改的树链剖分~ 如何区间修改?跟树链剖分的区间询问一个道理,再加上线段树的区间修改就好了. 这道题要注意的是,无论是线段树上还是原树上,把两个区间的信息合并的时候,要注意中间相邻两个颜色是否相同. 这代码好长啊啊啊啊 幸好一次过了不然我估计永远也De不出来 #include <cstdio> #include <cstring> #include <algorithm> using namesp

MUI 选项卡切换+下拉刷新动态 完整实现一例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <

7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

LayUI tab选项卡 + 分页展示 实现 Tab选项卡切换显示对应数据 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1.选项卡[官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格[官网 – 文档/示例 – 内置模块 – 数据表格] 3.分页[官网 – 文档/示例 – 内置模块 – 分页] 具体实现过程: 1. 先找选项卡.使用默认的tab.然后查看代码.复制对应的代码. 2. 然后改成自己想要显示效果.如下: 3. 然后查看具体的代码如下: 4. 获取Tab选