javascript - Vuejs：如何显示选定的ul 下拉菜单中的元素

Question

我使用 ul 和 li 元素创建了一个简单的下拉菜单。我使用了一个 for 循环来动态生成 li 元素。我有一个名为 nav-is-visible 的类，当用户单击下拉菜单时，它将显示 li 元素。但是，我不知道如何显示当前选择的值。这是我的代码：

更新：我添加了一个 codepen 链接https://codepen.io/Issaki/pen/OYxbJV

更新：我仍在尝试解决此问题，有人可以帮助我吗？

  <template>   
  <div>
    <nav :class="{'nav-is-visible' : displayCategory}">
      <ul>
        <li v-for="item in items" :key="item.id" @click="displayCategory = !displayCategory">
          <p>{{item.name}}</p>
        </li>
      </ul>
    </nav>
  </div>
</template>


<script>
export default {
  data() {
    return {
      displayCategory: false,
      items: [
        {
          id: 1,
          name: "Basketball"
        },
        {
          id: 2,
          name: "Soccerr"
        }
      ]
    };
  },

  methods: {
  },
  computed: {}
};
</script>

<style>
nav {
  width: 100%;
  top: 90px;
  left: 0;
  z-index: 3;
  height: 45px;
  line-height: 45px;
  vertical-align: middle;
  display: inline-block;
  font-size: 0.1px;
  font-weight: 300;
  font-style: normal;
  cursor: pointer;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
}

/* Create the bordera and the surrounding */
nav ul {
  height: 45px;
  padding: 0 10px;
  text-align: left;
  border: 1px solid #33383b;
  background: #fafafa;
  border-radius: 3px;
}

nav ul li {
  display: block;
  position: relative;
}

nav ul li:first-child:before {
  position: absolute;
  content: " Menu ";
  position: relative;
  font-size: 1.6rem;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
nav ul li:first-child:after {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  font-size: 1.2rem;
  content: "\f0d7";
  color: #2267b9;
  padding-right: 10px;
}

/* Hide the li elements */
nav p {
  display: none;
  font-size: 1.5rem;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
  color: #4a5564;
}

#category-btn {
  display: none;
}

.category-input {
  display: none;
}

nav.nav-is-visible ul {
  height: initial;
  background: #f1f1f1;
}

nav.nav-is-visible ul li:first-child:after {
  content: "\f00d";
}
nav.nav-is-visible ul li p {
  display: block;
  border-bottom: 2px solid #f1f1f1;
}
nav.nav-is-visible ul li p:hover {
  border-bottom: 2px solid #4a5564;
}
nav.nav-is-visible ul li:last-child {
  margin-bottom: 10px;
}

/* Make button visible again when nav-is-visible class is toggled */
nav.nav-is-visible #category-btn {
  display: block;
}
</style>

标签： javascriptvue.js

Answer 1

需要：

• 保存您单击的项目。
• 在 li 上添加一个基于 selectedId 和 item id 相等性的条件类。

<template>
    <div>
        <nav :class="{'nav-is-visible' : displayCategory}">
            <ul>
                <li v-for="item in items" :key="item.id" @click="select(item.id)" :class="selectedId === item.id ? 'my-selected-item-class':null">
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selectedId : null,
                displayCategory: false,
                items: [{id: 1,name: "Basketball"},{id: 2,name: "Soccerr"}]
            };
        },
        methods: {
            select(itemId){
                this.selectedId = itemId
                this.displayCategory = !this.displayCategory
            }
        }
    };
</script>