前言:有时候不想用ui框架,就可以参考参考
效果如图:
代码:
<template>
<div class="my">
<div class="container">
<div class="nav_box">
<ul class="item_list">
<li
class="item"
@mouseenter="enter(i + 1)"
@mouseleave="leave(i + 1)"
v-for="(item, i) in nav_list"
:key="i"
>
{{ item }}
</li>
</ul>
</div>
<div class="content_box">
<div class="nav">
<ul>
<li
class="son"
v-for="(item, i) in content_list"
:key="i"
v-show="value == i + 1"
>
右侧——{{ item }}
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: 1,
nav_list: ["导航1", "导航2", "导航3", "导航4"],
content_list: ["内容1", "内容2", "内容3", "内容4"],
};
},
methods: {
enter(val) {
this.value = val;
},
// 鼠标离开时
leave(val) {
// 这里填默认值
this.value = 1;
},
},
};
</script>
<style lang="scss">
.my {
.container {
width: 1024px;
margin: 0 auto;
background-color: azure;
border: 1px solid red;
display: flex;
.nav_box {
.item {
font-size: 20px;
width: 300px;
height: 40px;
background: #444;
color: aqua;
margin: 10px;
line-height: 40px;
text-align: center;
&:hover {
background-color: rosybrown;
}
}
}
.content_box {
background: #fff;
width: 100%;
padding: 10px;
height: auto;
.son {
font-size: 50px;
text-align: center;
display: block;
height: 200px;
line-height: 200px;
}
}
}
}
</style>