javascript - vue 的 .each() 方式

Question

我有一个硬编码的 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>

Answer 1

示例: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)。