vue.js原生简易选项卡案例

人生不求满

已于 2023-02-11 17:38:31 修改

阅读量183

点赞数

分类专栏： vue 文章标签： vue.js

于 2023-02-11 17:36:16 首次发布

本文链接：https://blog.csdn.net/m0_72967249/article/details/128986149

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

样式

全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue选项卡</title>
		<script src="../js/vue.js"></script>
		<style>
			.block{
				width: 200px;
				height: 200px;
				border: 1px solid #ffa0a0;
			}
			.active{
				color: #f70;
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>简易选项卡</h1>
			<!-- :class="num==1?'active':''"代码高亮，当点击对应的值满足条件时，给button添加active这个类，
			这句话的意思是，num==1吗，等于1，添加active这个类；否则为空，也就是不添加任何东西 ，下面的话以此类推-->
			<button @click="num=1" :class="num==1?'active':''">动漫</button>
			<button @click="num=2" :class="num==2?'active':''">设计</button>
			<button @click="num=3" :class="num==3?'active':''">书法</button>
			<div class="block" v-if="num==1">动漫页面</div>
			<div class="block" v-if="num==2">设计页面</div>
			<div class="block" v-if="num==3">书法页面</div>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data(){
					return{
						num:1 //num的默认值为1，所以第一个就被默认选中了，默认值可以修改，但是注意要和上面的num对应
					}
				}
			})
		</script>
	</body>
</html>