我有一个硬编码的 menu.vue 文件,它基本上获取 url slug,并添加一类 active(如果它与 <a>
匹配)链接。它工作得很好,但我确信有一种更干净的方法可以做到这一点,所以我不会一遍又一遍地复制/粘贴相同的代码。在 Jquery 中,我知道我可以循环遍历所有 <a>
在 each
并查看 slug 是否与 href 和 addClass
匹配
菜单.vue
<template>
<div>
<!-- Main site menu -->
<nav>
<ul>
<a href="/about" v-bind:class="{'active' : slug == 'about'}"><li>about</li></a>
<a href="/faq" v-bind:class="{'active' : slug == 'faq'}"><li>faq</li></a>
<a href="/signup" v-bind:class="{'active' : slug == 'signup'}"><li>signup</li></a>
<a href="/login" v-bind:class="{'active' : slug == 'login'}"><li>login</li></a>
<a href="/contact" v-bind:class="{'active' : slug == 'contact'}"><li>Contact</li></a>
</ul>
</nav>
</div>
</template>
<script>
export default {
data(){
return {
slug: ''
}
},
created(){
var urlArray = window.location.pathname.split( '/' );
this.slug = urlArray[1];
},
}
</script>
最佳答案
示例:https://jsfiddle.net/wostex/63t082p2/46/
<div id="app">
<p v-for="link in links" :key="link">
<a :href="'/'+link" :class="{'active': slug == link}">{{link}}</a>
</p>
</div>
new Vue({
el: '#app',
data: {
links: [
'about',
'home',
'faq'
]
}
});
在此示例中,每个链接都有一个相应的类,例如“主页”类(class),“常见问题解答”类(class)。
关于javascript - vue 的 .each() 方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43667740/