Vue学习笔记——选项卡案例(tab栏切换)

Vue学习笔记——选项卡案例(tab栏切换)

内容截图:
在这里插入图片描述

常犯问题:看到这个内容的时候,总是思考怎么将3个div叠起来。
其实不需要,隐藏了div不占位置的。每次只显示一个div且显示时占的位置是一样的
如果你都没有给它们添加显示的类,那么你只能看到选项,看不到图的盒子

框架:

  • ul 中 li 代表每一项的tab栏
  • div 代表每个对应的盒子

如何将data中的数据渲染到页面上?

  • 利用v-for="(item,index) in list"
  • 然后把list中的数据渲染到页面中 {{item.title}}

如何设置点击选中的背景?

  • 让默认的第一项tab栏高亮
  • 在data中定义一个默认的索引 currentIndex 为0
  • 给第一个li 添加active 类名
    通过v-bind:class=" "
  • currentIndex===index 如果相等,则添加类名active类名,否则添加 空类名

图片显示同上👆

代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选项卡</title>
	<style type="text/css">
		.tab ul{
			overflow: hidden;
			padding: 0;
			margin: 0;
		}
		.tab ul li{
			box-sizing: border-box;
			padding: 0;
			float: left;
			width: 100px;
			height: 45px;
			line-height: 45px;
			list-style: none;
			text-align: center;
			border-top: 1px solid blue;
			border-right: 1px solid blue;
			cursor
		}
		.tab ul li:first-child {
			border-left: 1px solid blue;
		}
		.tab ul li.active{
			background-color: orange;
		}
		.tab div{
			width: 500px;
			height: 300px;
			display: none;
			text-align: center;
			font-size: 30px;
			line-height: 300px;
			border:1px solid blue;
			border-top:0px;
		}
		.tab div.current{
			display: block;
		}
	</style>
</head>
<body>
<div id="app">
	<div class="tab">
		<ul>
			<li :key="item.id" v-for="(item,index) in list" v-on:click="handle(index)" :class='currentIndex==index?"active":""'>{{item.title}}</li>
		</ul>
		<div :key="item.id" v-for="(item,index) in list" :class='currentIndex==index?"current":""'>
			<img :src="item.path">
		</div>
	</div>
</div>

<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
	el:'#app',
	data:{
		 list: [{
          id: 1,
          title: 'apple',
          path: 'img/apple.png'
        },{
          id: 2,
          title: 'orange',
          path: 'img/orange.png'
        },{
          id: 3,
          title: 'lemon',
          path: 'img/lemon.png'
        }],
        currentIndex:0
	},
	methods:{
		handle:function(index){
			this.currentIndex = index;
			console.log(this.currentIndex);
		}
	}
})
</script>
</body>
</html>

热门文章

暂无图片
编程学习 ·

CnPlugin是PL/SQL Developer工具插件使用

CnPlugin是PL/SQL Developer工具插件,支持PL/SQL Developer 7.0以上版本。1、安装2、拷贝文件安装结束后,得到一个 CnPlugin.dll 和 “CnPlugin”的文件夹,把这两个拷贝到 PL/SQL Developer的安装路径下的 “PlugIns”目录下,重启PL/SQL Develop可以使用了,打开的时候 会在…
暂无图片
编程学习 ·

css实现瀑布流

一行代码实现瀑布流css 的 column-count 属性,将一个盒子分成 x 列,例如 column-count: 2; ,就是将一个div分成 2 列但是排列不是按照数组顺序排序,因为分成2列后是按照顺序从上往下排列,会自动计算,第一列按照数组顺序渲染完才接着渲染第二列,无关紧要 <template>…
暂无图片
编程学习 ·

记一次spark-submi 提交python脚本 遇到的问题

一、通过spark-submit 提交报错如下 yarn运行模式spark用的版本是2.4.0是支持pandas_udf的,而且通过pyspark的shell命令行一条条执行 都是没有问题的 但是将代码作为文件用spark submit提交就报这个错误 二、解决办法: @pandas_udf(returnType=“string”, PandasUDFType.…
暂无图片
编程学习 ·

3、【STM32F0系列学习】之—中断和事件

【STM32F0系列学习】之—中断和事件1、什么是“中断”2、中断优先级3、中断嵌套4、嵌套向量中断控制器 (NVIC)5、中断与事件的区别和主要特性6、外部中断(EXTI)配置6.1【标准库】的配置方式6.2【HAL库】的配置方式 1、什么是“中断”CPU执行程序时,由于发生了某种随机的事件…
暂无图片
编程学习 ·

文创调研案例02-瑞士达沃斯小镇

摘要:达沃斯小镇作为世界特色小镇的典范,以其特色生态为基础,不断创新,形成了会议、疗养、体育、旅游多条产业互相作用的综合产业,其宝贵经验具有借鉴价值。中国自2016年起,特色小镇遍地开花,但同质化现象严重,如何打造特色小镇的“特”成了关键。本文以达沃斯小镇为例…
暂无图片
编程学习 ·

asp.net core 3.1 中配置跨域

// 1.跨域配置 注册策略 services.AddCors(options => {options.AddPolicy("CorsPolicy", builder =>{builder.SetIsOriginAllowed((x) => true).AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();});});// 2. 添加使用注册的策略app.UseCors("…
暂无图片
编程学习 ·

Java小型计算器

通过对程序的编写,可以不同位数实现对加减乘除的计算 ,以及对错误答案给出提示。以满足一些大人给小孩出题的困惑 ,此程序可以自己出题,自己检测答案。随时随地想做就做。需求:1.实现计算器的基本功能。 2.可以练习加减乘除的计算,以提高自己算题的速度 和探索新的解题方…
暂无图片
编程学习 ·

当我们谈论算法我们在谈论什么:由疫情核酸检测想到的分治算法(Divide-and-Conquer)

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_159 北京的疫情一波未平一波又起,由此看来,战“疫”将是一场旷日持久的战争,绝不能掉以轻心、轻易言胜。病毒随时都会死灰复燃,以生命为代价换来的经验教训值得我们每一个人久久深思。笔者所在的小区也开始组织居民批量进…
暂无图片
编程学习 ·

Android客户端调起地图定位不准,导航路线出现偏差,目的地坐标偏离

前言 APP调起地图导航出现偏差 是什么问题造成的呢 一:可能是模糊定位造成的 二:也有可能 改变了经纬度的数据 解决思路如下 先了解一下调起高德APP的各个参数是什么 百度地图 参数如下:参数名称 描述 是否必选 格式(示例)origin 起点名称或经纬度,或者可同时提供名称和经纬…
暂无图片
编程学习 ·

java 并发 join 之 老王泡茶

package juc;import java.util.concurrent.TimeUnit;/*** @author yanjun.liu* @date 2020/7/1--17:00*/ public class Test6 {public static void main(String[] args) throws InterruptedException {Thread lw= new Thread(()->{try {System.out.println("老王开始洗…
暂无图片
编程学习 ·

sed详解

1. Sed简介sed 是一种在线编辑器,它一次处理一行内容。处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的内容送往屏幕。接着处理下一行,这样不断重复,直到文件末尾。文件内容并没有…
暂无图片
编程学习 ·

数据结构之查找

【知识框架】一、查找的基本概念 1、查找表 查找表是由同一类的数据元素(或记录)构成的集合。集合中的数据元素之间存在着完全松散的关系,因此查找表是一种非常灵便的数据结构。 2、关键字 关键字是数据结构(或记录)中某个数据项的值,用它可以标识一个数据元素(或记录)…
暂无图片
编程学习 ·

JavaScript 详解预编译原理

JavaScript 预编译原理 今天用了大量时间复习了作用域、预编译等等知识 看了很多博文,翻开了以前看过的书(好像好多书都不会讲预编译) 发现当初觉得自己学的很明白,其实还是存在一些思维误区 (很多博文具有误导性) 今晚就整理了一下凌乱的思路 先整理一下预编译的知识吧,…
暂无图片
编程学习 ·

Linux下core dump学习

参考链接 在linux下开发时,如果程序突然崩溃了,也没有任何日志。这时可以查看core文件。从core文件中分析原因,通过gdb看出程序挂在哪里,分析前后的变量,找出问题的原因。 1 查看linux下core dump是否开启 在linux上coredump默认是关闭的,可以通过ulimit -c查看,如果输出…
暂无图片
编程学习 ·

神经网络模型(Backbone)

转自:https://www.cnblogs.com/silence-cho/p/11620863.html神经网络模型(Backbone)自己搭建神经网络时,一般都采用已有的网络模型,在其基础上进行修改。从2012年的AlexNet出现,如今已经出现许多优秀的网络模型,如下图所示。 主要有三个发展方向:Deeper:网络层数更深,代…
暂无图片
编程学习 ·

setuptools Command Reference

https://setuptools.readthedocs.io/en/latest/setuptools.html#command-reference alias - Define shortcuts for commonly used commands bdist_egg - Create a Python Egg for the project develop - Deploy the project source in “Development Mode” egg_info - Create …
暂无图片
编程学习 ·

实施java 的web项目需要掌握的技术

实施java 的web项目需要掌握的技术如下:1.java语言:JSP、Servlet、JDBC、javaBean(Application)从这四部分开始创建web项目。(一)java Database Connectivity(JBDC)技术它是一种执行SQL语句的java API,由一组用java编程语言编写的类与接口组成,为开发人员提供了一个标准…