vue 选项卡切换

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

想喝橙汁儿

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

阅读量1.6k

点赞数 11

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

本文链接：https://blog.csdn.net/weixin_46328144/article/details/108274691

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

vue 初学者

选项卡切换

效果：

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.con{
			margin: 100px;
		}
		#app{
			height: 50px;
		}
		#app>p{
			width: 100px;
			float: left;
			border: 1px solid #5597B4;
			text-align: center;
			line-height: 50px;
			background-color: azure;
		}
		.box{
			width: 500px;
			height: 300px;
			border: 1px #f00 solid;
		}
		
	</style>
</head>
<body>
	<div class="con">
		<div id="app">
			<p v-for="(item,index) in list" @click="change(index)">{{item}}</p>
			
			<div class="box">
			<p v-for="(item,index) in content" v-if="index == num">{{item}}</p>
			
		</div>
		</div>
		
	</div>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				num:0,
				list:["vue","js","css","html","php"],
				content:[
					"朝辞白帝彩云间，千里江陵一日还。 两岸猿声啼不住，轻舟已过万重山。vue",
					"国破山河在，城春草木深。 感时花溅泪，恨别鸟惊心。 烽火连三月，家书抵万金。 白头搔更短，浑欲不胜簪。js",
					"远上寒山石径斜，白云深处有人家。 停车坐爱枫林晚，霜叶红于二月花。css",
					"死去元知万事空，但悲不见九州同。 王师北定中原日，家祭无忘告乃翁。html",
					"采薇采薇，薇亦作止。曰归曰归，岁亦莫止。靡室靡家，猃狁之故。不遑启居，猃狁之故。	采薇采薇，薇亦柔止。曰归曰归，心亦忧止。忧心烈烈，载饥载渴。我戍未定，靡使归聘。	采薇采薇，薇亦刚止。曰归曰归，岁亦阳止。王事靡盬，不遑启处。忧心孔疚，我行不来！	彼尔维何？维常之华。彼路斯何？君子之车。戎车既驾，四牡业业。岂敢定居？一月三捷。驾彼四牡，四牡骙骙。君子所依，小人所腓。四牡翼翼，象弭鱼服。岂不日戒？猃狁孔棘！	昔我往矣，杨柳依依。今我来思，雨雪霏霏。行道迟迟，载渴载饥。我心伤悲，莫知我哀！php",
					]
			},
			methods:{
				change(index){
					this.num=index;
					
				}
			}
		})
	</script>
	
</body>
</html>

想喝橙汁儿

关注

11
点赞
踩
0

收藏

觉得还不错? 一键收藏
11
评论
vue 选项卡切换

vue 初学者选项卡切换效果：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="./vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{
复制链接

扫一扫