信息管理实践第十三周周记

最新推荐文章于 2024-08-13 16:49:21 发布

梦瑾い

最新推荐文章于 2024-08-13 16:49:21 发布

阅读量133

点赞数

文章标签： vue css

本文链接：https://blog.csdn.net/bili_meng_jin/article/details/118226204

版权

第十三周周记

实验内容
网页展示
代码

实验内容

本节课对Vue.js进行了更深入的学习。

网页展示

本实验是根据菜鸟教程进行学习，部分代码源自于菜鸟教程。
运行后：
在这里插入图片描述
点击PROJECTS后：

其他两项同理：

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LSQ对Vue的第二次周记</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
		body {background-color:lightblue;}

		*{
			margin:0;
		}

		body{
			font:15px/1.3 'Open Sans', sans-serif;
			text-align:center;
		}

		nav{
			display:block;
			margin:10px auto 45px;
			background-color:#000000;
			box-shadow:0 1px 1px #ccc;
			border-radius:2px;
		}

		nav a{
			display:block;
			padding: 13px 15px;
			color:#fff !important;
			font-weight:bold;
			font-size:20px;
			line-height:1.5;
			text-transform: uppercase;
		}

	    nav a:first-child{
		    border-radius:2px 0 0 2px;
	    }

	    nav a:last-child{
	    	border-radius:0 2px 2px 0;
	    }

	    nav.home .home,
	    nav.projects .projects,
	    nav.services .services,
	    nav.contact .contact{
	    	background-color:#e35885;
	    }

	    p{
	    	font-size:22px;
	    	font-weight:bold;
	    	color:#7d9098;
	    }

	    p b{
	    color:#ffffff;
	    	display:inline-block;
	    	padding:5px 10px;
	    	background-color:#aaaa00;
	    	border-radius:2px;
	    	text-transform:uppercase;
	    	font-size:18px;
	    }
    </style>
</head>
<body>
    <div id="main">
	    <nav v-bind:class="active" v-on:click.prevent>
	    	<a href="#" class="home" v-on:click="makeActive('home')">Home</a>
	    	<a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
	    	<a href="#" class="services" v-on:click="makeActive('services')">Services</a>
	    	<a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
	    </nav>
	    <p>点击了<b>{{active}}</b></p>
    </div>
    <script>
        var demo = new Vue({
	        el: '#main',
	        data: {
		        active: 'home'
	        },
	        methods: {
		        makeActive: function(item){
			        this.active = item;
		        }
	        }
        });
    </script>
</body>
</html>

梦瑾い

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
信息管理实践第十三周周记

第十三周周记实验内容网页展示代码实验内容本节课对Vue.js进行了更深入的学习。网页展示本实验是根据菜鸟教程进行学习，部分代码源自于菜鸟教程。运行后：点击PROJECTS后：其他两项同理：代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫