商品左侧菜单栏vu3代码

商品左侧菜单栏的Vue 3代码可以如下所示```html
<template>
<div class="sidebar">
<ul>
<li v-for="category in categories" :key="category.id" @click="selectCategory(category)">
{{ category.name }}
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
categories: [
{ id: 1, name: '电子产品' },
{ id: 2, name: '家居用品' },
{ id: 3, name: '服装鞋帽' },
// 其他分类...
],
selectedCategory: null
};
},
methods: {
selectCategory(category) {
this.selectedCategory = category;
// 处理选中分类的逻辑...
}
}
};
</script>

<style scoped>
.sidebar {
width: 200px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
cursor: pointer;
padding: 10px;
}

li:hover {
background-color: #f0f0f0;
}
</style>

这段代码实现了一个简单的商品左侧菜单栏，使用了Vue 3的语法。菜单栏通过`v-for`指令循环渲染分类列表，并通过`@click`事件监听点击事件。点击某个分类时，会调用`selectCategory`方法来处理选中分类的逻辑，并将选中的分类保存在`selectedCategory`变量中。