使用 v-for 生成左侧导航菜单 - 微信小程序开发

如果你想要使用 'v-for' 在左侧导航容器中生成 '' 元素作为菜单项，你可以对代码进行如下修改：

<template>
  <view>
    <!-- 顶部导航栏 -->
    <view class="af-head">
      <span class="af-head-msg" style="font-size: 60rpx;">&lt;</span>
      <span class="af-head-msg af-head-fuc">全部功能</span>
    </view>

    <!-- 左侧导航栏 -->
    <view class="sidebar">
      <view v-for="item in menuItems" :key="item.id" @click="selectMenuItem(item.id)" :class="{ active: activeMenuItem === item.id }">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeMenuItem: null, // 当前选中的菜单项ID
      menuItems: [ // 菜单项数据
        { id: 1, name: '菜单项1' },
        { id: 2, name: '菜单项2' },
        { id: 3, name: '菜单项3' }
      ]
    };
  },
  methods: {
    selectMenuItem(itemID) {
      this.activeMenuItem = itemID;
    }
  }
};
</script>

<style>
.af-head {
  position: relative;
  background-color: #629ffc;
  height: 100rpx;
  display: flex;
  justify-content: center;
  font-size: 44rpx;
  font-weight: 500;
  font-family: sans-serif;
}

.af-head-msg {
  position: absolute;
  bottom: 16rpx;
  color: white;
  left: 38rpx;
}

.af-head-fuc {
  text-align: center;
  left: 300rpx;
}

.sidebar {
  width: 100px;
  background-color: white;
  height: 100vh;
  padding-top: 20rpx;
}

.sidebar view {
  padding: 10rpx;
  color: black;
  list-style-type: none;
  display: block;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar view.active {
  border-left: 4px solid #629ffc;
  background-color: #f0f0f0;
}
</style>

在上述代码中，我们使用 'v-for' 循环生成了 '' 元素作为菜单项，根据菜单项数据的长度动态生成菜单项。'menuItems' 数组用于存储菜单项的数据，其中包含了 'id' 和 'name' 属性。

在 'v-for' 循环中，我们使用 ':key' 绑定了每个菜单项的唯一标识符。点击菜单项时，调用 'selectMenuItem' 方法来更新 'activeMenuItem' 变量，实现菜单项的选中状态。

请根据你的需求和样式要求，进行必要的调整。

希望这个示例对你有所帮助！