Javascript 在列表菜单项上切换活动类-vue js

我希望，单击一个菜单项，激活的类只会为该特定项触发，并为其他项删除，直到现在我写了以下内容：

<template>
  <nav class="navbar">
    <div class="navbar__brand">
      <router-link to="/">Stock Trader</router-link>
    </div>
    <div class="navbar__menu">
      <ul class="navbar__menu--list">
        <li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
          <router-link to="/portfolio">Portfolio</router-link>
        </li>
        <li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
          <router-link to="/stocks">Stocks</router-link>
        </li>
      </ul>
    </div>
    <div class="navbar__menu--second">
      <ul class="navbar__menu--list">
        <li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
          <a href="#">End Day</a>
        </li>
        <li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
          <a href="#">Save / Load</a>
        </li>
      </ul>
    </div>
  </nav>
</template>
<script>

    export default {
      data(){
        return{
          isActive: false

        }
      }
    }
</script>

股票交易员


文件夹


股票








导出默认值{
数据（）{
返回{
isActive:错误
}
}
}

---

当然，当我点击一个项目时，所有项目的活动类都会被插入/删除，那么，让一个特定项目在点击后接收活动类的最佳解决方案是什么呢？

您需要为每个可点击的项目设置某种标识符，并将其设置为您的

数据属性。比如说

data() {
  return { active: null }
}

<li @click="active = 'portfolio'"
    class="navbar__menu--item" 
    :class="{active:active === 'portfolio'}">

和在您的列表项中（例如）



在本例中，标识符是“portfolio”，但这可以是任何东西，只要您对每个项目使用唯一的值。
您需要为每个可单击项目使用某种标识符，并将其设置为您的
数据属性。比如说

data() {
  return { active: null }
}

<li @click="active = 'portfolio'"
    class="navbar__menu--item" 
    :class="{active:active === 'portfolio'}">

和在您的列表项中（例如）



在本例中，标识符是“公文包”，但这可以是任何东西，只要您对每个项目使用唯一的值。
您可以保留一个链接对象，并处理对每个项目的单击。例如

data() {
  return {
    links: [
      {
        title    : 'Portfolio',
        to       : '/portfolio',
        isActive : false,
        location : 'first',
      },
      {
        title    : 'Stocks',
        to       : '/stocks',
        isActive : false,
        location : 'first',
      },
      {
        title    : 'End Day',
        to       : '#',
        isActive : false,
        location : 'second',
      },
      {
        title    : 'Save / Load',
        to       : '#',
        isActive : false,
        location : 'second',
      },
    ]
  };
},
methods: {
  handleNavClick(item) {
    this.links.forEach(el, () => {
      el.isActive = false;
    });

    item.isActive = true;
  }
},

您可以保留一个链接对象，并单击每个项目。例如

data() {
  return {
    links: [
      {
        title    : 'Portfolio',
        to       : '/portfolio',
        isActive : false,
        location : 'first',
      },
      {
        title    : 'Stocks',
        to       : '/stocks',
        isActive : false,
        location : 'first',
      },
      {
        title    : 'End Day',
        to       : '#',
        isActive : false,
        location : 'second',
      },
      {
        title    : 'Save / Load',
        to       : '#',
        isActive : false,
        location : 'second',
      },
    ]
  };
},
methods: {
  handleNavClick(item) {
    this.links.forEach(el, () => {
      el.isActive = false;
    });

    item.isActive = true;
  }
},

这是进行导航的更好方法。此方法可以帮助您使用圆圈作为链接输出来减小模板的大小。这是进行导航的更好方法。此方法可以帮助您使用圆圈作为链接输出来减小模板的大小。