vue 选项卡切换

ゞ浴缸里的玫瑰 2022-12-01 15:53 155阅读 0赞

# vue 初学者 #

## 选项卡切换 ##

*  效果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]

代码如下：

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/37c49efba510472fb6495b612078baf2.png