Vue循环中动态切换箭头图标方向
在Vue循环中，每个菜单项需要独立控制箭头图标方向。共享一个show属性会导致所有菜单项同时改变状态。
解决方案：
为每个菜单项添加一个独立的show属性，通过该属性控制箭头图标的显示。
立即学习“前端免费学习笔记（深入）”；
代码示例：
<code class="vue"><template>
<ul>
<li v-for="(item, index) in menuItems" :key="item.id">
{{ item.name }}
<span @click="arrowControl(item)">
<i :class="{'up': item.show, 'down': !item.show}"></i>
</span>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ id: 1, name: '菜单项1', show: false },
{ id: 2, name: '菜单项2', show: false },
{ id: 3, name: '菜单项3', show: false }
]
};
},
methods: {
arrowControl(item) {
item.show = !item.show;
}
}
};
</script>
<style scoped>
i.up {
transform: rotate(90deg);
}
i.down {
transform: rotate(270deg); /* 或rotate(-90deg) */
}
</style></code>关键点：
item.id作为v-for的key，保证唯一性。arrowControl方法只修改当前菜单项的show属性。:class绑定条件类名up和down控制箭头图标方向。通过以上方法，点击每个菜单项将独立切换其箭头图标的方向，避免互相影响。 记住根据你的实际项目调整CSS样式。
以上就是Vue循环中如何实现点击菜单项切换箭头图标方向？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
465
收藏
