版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36771997/article/details/78019693
<template>
<div class="title" name="list">
<!--通过v-for循环打印,:to进行绑定router-link的路径,然后结合router-link-active给激活a加样式-->
<router-link :to="{ path: bar}" v-for="(bar, index) in title">
<span >
{{ bar }}
</span>
</router-link>
</div>
</template>
<script>
export default {
data () {
return {
title: [
'新歌',
'排行',
'榜单',
'歌手'
]
}
}
}
</script>
<style lang="css">
.title {
width: 100%;
float: left;
}
.title span {
cursor: pointer;
display: inline-block;
width: 20%;
margin-left: 4%;
font-size: 4vw;
text-align: center;
padding: 2% 0;
}
.router-link-active {
color: #49A4F7;
border-bottom: 2px solid #49A4F7;
}
</style>
<div class="title" name="list">
<!--通过v-for循环打印,:to进行绑定router-link的路径,然后结合router-link-active给激活a加样式-->
<router-link :to="{ path: bar}" v-for="(bar, index) in title">
<span >
{{ bar }}
</span>
</router-link>
</div>
</template>
<script>
export default {
data () {
return {
title: [
'新歌',
'排行',
'榜单',
'歌手'
]
}
}
}
</script>
<style lang="css">
.title {
width: 100%;
float: left;
}
.title span {
cursor: pointer;
display: inline-block;
width: 20%;
margin-left: 4%;
font-size: 4vw;
text-align: center;
padding: 2% 0;
}
.router-link-active {
color: #49A4F7;
border-bottom: 2px solid #49A4F7;
}
</style>