0
点赞
收藏
分享

微信扫一扫

用Vue插槽实现一个简单的电影网站导航栏

用插槽实现一个导航栏

每次访问电影网站,都会看到一个导航栏,今天就仿照一个导航栏结构。

结果

用Vue插槽实现一个简单的电影网站导航栏_html

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
.c-nav {
width: 900px;
height: 42px;
margin: 0 auto;
border-radius: 5px;
position: relative;
}
.c-nav li {
float: left;
width: 83px;
text-align: center;
line-height: 42px;

}
.c-nav li a {
color: rgb(253, 252, 252);
display: inline-block;
height: 42px;
}
header {
background: rgb(0, 0, 0);
}
.c-nav li.current a {
color: rgb(54, 17, 221);
background-color: rgb(255, 0, 0);
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<my-component>
<!-- 定义导航栏结构 -->
<template v-slot:header>
<div id="c_nav" class="c-nav">
<ul><li><a>电影院</a></li></ul>
<ul ref='nav'>
<li v-bind:class="name" v-for="item,key in list" @mouseenter="current(key)" @mouseleave="cancel(key)" :id=key>
<a href="https://www.baidu.com/">{{item}}</a>
</li>
</ul>
</div>
</template>
</my-component>
</div>
<script>
// 注册组件
Vue.component('my-component', {
render(createElement) {
return createElement('div', [
createElement('header', this.$slots.header),
])
}
})
var vm = new Vue({
el: '#app',
// 定义初始数据
data: {
list: ['首页', '电影', '电视剧', '综艺', '动漫'],
name:' '

},
methods: {
// 定义事件处理函数
current(key) {
vm.$refs.nav.getElementsByTagName('li')[key].className = 'current'; //鼠标悬停
},
cancel(key) {
vm.$refs.nav.getElementsByTagName('li')[key].className = ''; //鼠标离开
}
}
})
</script>
</body>
</html>


电影网站的导航栏,哈哈

举报

相关推荐

0 条评论