Vue-实现-选项卡

最新推荐文章于 2024-05-15 13:06:41 发布

Pluto_zk

最新推荐文章于 2024-05-15 13:06:41 发布

阅读量626

点赞数 1

分类专栏： Vue 文章标签：选项卡

本文链接：https://blog.csdn.net/Pluto_zk/article/details/100126350

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Vue.js框架来创建一个功能完善的选项卡组件，包括切换选项卡、动态加载内容以及添加自定义样式等关键步骤，旨在帮助开发者更好地理解和应用Vue组件化开发。

摘要由CSDN通过智能技术生成

一、
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue选项卡</title>
    <style>
        .content {
            width: 300px;
            height: 200px;
            overflow: hidden
        }

        .content>div {
            width: 300px;
            height: 200px;
        }

        .active {
            background: gold
        }
    </style>
</head>

<body>
    <div id="app">
        <button v-for="(item,index) in btns" :class="index == activeIndex?'active':''"
            @click="handleToggle(index)">{{item}}</button>
        <div class="content">
            <div v-for="(item,index) in contents" v-show="activeIndex==index">{{item}}</div>
        </div>
    </div>
</body>

</html>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            activeIndex: 0,
            btns: ["抽烟", "喝酒", "烫头"],
            contents: [
                '我喜欢你',
                '你是个好人',
                'nkqnmlgb'
            ]
        },
        methods: {
            handleToggle(index) {
                this.activeIndex = index;
            }
        }
    })
</script>

二、
<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
	<meta name="apple-mobile-web-app-title" content="Vue选项卡">
	<title>Vue实现选项卡</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<style>
	#app{
		width: 300px;
		height: 350px;
		margin: 100px auto;
	}
	button {
		width: 100px;
		height: 50px;
		text-align: center;
		border: none;
		cursor: pointer;
		color: #FFF;
		background: #000;
 
	}
	#app>div{
		height:300px;
		text-align: center;
		line-height: 300px;
	}
	.active1{
		background: red;
			
	}
	.active2{
		background: yellow;
		color: #FFF;
 
	}
	.active3{
		background: blue;
		color: #FFF;
	
	}
 
</style>
 
<body>
	<div id="app">
		<button 
			v-for="(val,key) in box" 
			@click="changes(key)"
			:class="{active1:key==num&&key==0,active2:key==num&&key==1,active3:key==num&&key==2}"
		>{{key+1}}</button>
		<div 
			v-for="(val,key) in box"
			v-show="key==num"
			:class="{active3:key==num&&key==0,active1:key==num&&key==1,active2:key==num&&key==2}"
		>{{val}}</div>
	</div>
</body>
 
<script>
	new Vue({
		el: "#app",
		data: {
			box:["111","222","333"],
			num:0
		},
		methods:{
			changes(key){
				this.num=key;
				// console.log(key)
			}
		}
	})
	
</script>
 
</html>

Pluto_zk

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue-实现-选项卡

一、<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
复制链接

扫一扫

专栏目录