vue简单选项卡_小君君ok的博客-程序员宅基地

技术标签： vue

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
	<link rel="stylesheet" href="bootstrap.css">
	<style>
		#imgBg{
    
			width:100%;
		}
		.imgSty{
    
			
			width:400px;
			height:400px;
			display: block;
			/*border:2px solid pink;*/
		}
		.hideSty{
    
			display: none;
		}
		.currentNav{
    
		/*	width:50px;
			height:36px;*/
			background-color: #5bc0de;
			text-align: center;
			/*line-height: 36px;*/
			color:#fff;
			font-size: 16px;
		}
	</style>
</head>
<body>
	<div id="imgBg">
		<div style="width:100%;height:40px;display: flex;border:1px solid pink;">
		//判断点击哪个文字就把索引传入selectMennv方法，等于就添加文字的样式  遍历数组 填充图片文字说明
			<p :class="currentIndex == index?currentStyle:''" :key="item.id" v-for="(item,index) 	   in list" @click="selectMeinv(index)">{
    {
    item.name}}</p>
		</div>
		//判断 
		  <div :class="currentIndex == index?imgSty:imgHideSty" :key="item.id" v-for="(item,index) in list">
			<img :src="item.srcString" alt="" class="imgSty">
		  </div>
	</div>
</body>
<script>
	var vm = new Vue({
    
		el:"#imgBg",
		data:{
    
			currentIndex:0,//定义tab 和 图片容器的默认索引
			currentStyle:'currentNav',//定义tab的样式
			imgSty:"imgSty",//定义图片容器的显示的样式
			imgHideSty:"hideSty",//定义图片容器默认隐藏
			list:[{
     //假数据  图片对象包括三个属性  id name 和 path
					id:1,
					name:"美女1",
					srcString:"./img/mn1.jpg",
				},{
    
					id:2,
					name:"美女2",
					srcString:"./img/mn2.jpg",
				},{
    
					id:3,
					name:"美女3",
					srcString:"./img/timg.jpg",
				}]
		},
		methods:{
    
			test:function(){
    
				
			},
			selectMeinv(i){
      //当点击时候把索引传入
				console.log(i);
				this.currentIndex = i; // 点击谁让 让文字的索引等于图片的索引

			}
		}
	})
</script>
</html>

在这里插入图片描述

本文链接：https://blog.csdn.net/weixin_43467567/article/details/107859480

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【HTML+CSS】精灵图_weixin_30289831的博客-程序员宅基地

需求：实现下图效果（精灵图）<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .huawei { display:inline-block; ...

python基础---推导式_NINOMIYA~~的博客-程序员宅基地

1.概念推导式comprehensions（又称解析式），是Python的一种独有特性。推导式是可以从一个数据序列构建另一个新的数据序列。比如说给定一个列表，可以由推导式生成一个新的列表。2.列表推导式（1）概念列表推导式(list comprehension)是利用其它列表创建新列表的一种方式，工作原理类似for循环，即可对得到的元素进行转换或者筛选。（2）列表推导式...

若依框架实现导出的自定义功能_空想迷城的博客-程序员宅基地

首先在前端调用封装好的方法，传入后台 //加载表格 function queryReload(columnsVal) { //将原表格销毁，再重新init()初始化一次即可 $("#bootstrap-table").bootstrapTable('destroy'); var options = { url: prefix + "/list", createUrl: prefix + "/add",

Bootstrap,关于table表格中点击一个按钮获取该行的某一列的值并将其传到模态框的问题解决方法_前端点击某行按钮获取该行某列_Paul_Wen……的博客-程序员宅基地

先看部分相关代码:table表格中点击一个按钮:<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModall">表格中的按钮</button>触发模态弹出窗元素data-target，这个关键,对应下面弹窗的id。点击按钮会出现弹窗，弹窗代码:...

C++实现大数运算_weixin_34178244的博客-程序员宅基地

项目背景：大数运算，顾名思义，就是很大的数值的数进行一系列的运算。我们知道，在数学中，数值的大小是没有上限的，但是在计算机中，由于字长的限制，计算机所能表示的范围是有限的，当我们对比较小的数进行运算时，如：1234+5678，这样的数值并没有超出计算机的表示范围，所以可以运算。但是当我们在实际的应用中进行大量的数据处理时，会发现参与运算的数往往超过计算机的基本...

layui实现增加页面_ssqkxg的博客-程序员宅基地

1、在后台首页面增加一个教室信息列表，代码如下：结果如下：2、在教室信息列表中实现增加增加和修改等功能：注：先编写教室信息代码和教室添加信息代码，放在教室信息的文件夹下3、实现界面如下：4、遇到一个问题：Classes没有被定义，如下所示：目前没有得到解决。...