Vuejs:在分别单击一些元素之后，如何分配函数？

Question

问题是，当我单击一个li时，另一个li被选中并得到边框。我想分开工作！

    <!-- navbar -->

    <nav class="nav navbar-expand-lg main-nav d-flex">

        <h1 class="text-center fs-2">دفتر ترجمه رسمی پروند</h1>

        <ul class="my-auto mx-auto main-ul">

            <li>
                <router-link class="link" to="/">
                    خانه
                </router-link>
            </li>

            <li @click="activeMe" :class="[isActive ? 'list-border' : '']">
                <router-link class="link" to="/tranlsation-services">
                    خدمات ترجمه
                </router-link>
            </li>

            <li @click="activeMe" :class="[isActive ? 'list-border' : '']">
                <router-link class="link" to="/translation-tariffs">
                    تعرفه ترجمه
                </router-link>
            </li>

区块报价

 data() {

    return {
        mobileNav: false,
        isActive: false,
    }
},
methods: {
     activeMe() {
        if (!this.isActive) {
        this.isActive = !this.isActive
        }
    },
    handleView() {
        this.mobileNav = true;
    },
    handleView2() {
        this.mobileNav = false;
    },
},
computed: {
    }
},
created() {
    window.addEventListener("resize", this.handleView);
    window.addEventListener("resize", this.handleView2);
},
mounted() {
},

区块报价

.list-border 
    border-bottom: 4px solid white !important;
}`enter code here`

底部是添加在下面的图像点击图像部分，我想要这样的东西！

Answer 1

NavBar Toggle VueJs

我建议你用这种方法

• 我使用循环来最小化代码。
• 使用v-for键属性，我可以跟踪循环中的当前项并更改他的活动属性。
• 单击时，我首先取消选择所有项，然后更改所选项的active属性。

=======

​

<template>
  <div class="hello">
    <h3>Ecosystem</h3>
    <ul>
      <li
        v-for="item in menuList"
        :key="item"
        @click.stop="
          deselectAll();
          item.active = !item.active;
        "
        :class="{ 'list-border': item.active }"
      >
        <RouterLink class="link" :to="item.to">{{ item.label }}</RouterLink>
      </li>
    </ul>
  </div>
</template>

<script>
  import RouterLink from "vue-router";

  export default {
    components: {
      RouterLink,
    },
    name: "HelloWorld",
    data: () => {
      return {
        menuList: [{
            to: "https://router.vuejs.org",
            label: "vue-router",
            active: false,
          },
          {
            to: "https://vuex.vuejs.org",
            label: "vuex",
            active: false,
          },
          {
            to: "https://github.com/vuejs/vue-devtools#vue-devtools",
            label: "vue-devtools",
            active: false,
          },
          {
            to: "https://vue-loader.vuejs.org",
            label: "vue-loader",
            active: false,
          },
          {
            to: "https://github.com/vuejs/awesome-vue",
            label: "awesome-vue",
            active: false,
          },
        ],
      };
    },
    methods: {
      deselectAll() {
        this.menuList.map((i) => (i.active = false));
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    display: inline-block;
    margin: 0 10px;
  }
  
  a {
    color: #42b983;
  }
  
  .list-border {
    border-bottom: 4px solid red !important;
  }
</style>

​

你可以在这里试一试