Vue.js中如何通过类名获取元素？菜单切换场景实现求助

方法一：数据驱动（Vue推荐方式） #

Vue的核心是用数据控制视图，完全不需要手动操作DOM就能实现需求。我们可以通过动态绑定类名，配合CSS过渡效果完成菜单的展开/收起动画：

模板修改 #

给菜单元素添加动态类绑定：

<button class="menu__button"
        :class="{active:activeToggle}"
        @click="activeToggle = !activeToggle">
</button>
<div class="menu" :class="{ 'menu--expanded': activeToggle }">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS样式设置 #

通过CSS控制过渡逻辑，注意默认状态下保持display: flex但高度为0并隐藏溢出，避免display: none导致过渡动画失效：

.menu {
  display: flex;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease; /* 可根据需求调整过渡时长和动画曲线 */
}

.menu--expanded {
  height: 22rem;
}

点击按钮切换activeToggle值时，类名会自动更新，CSS会自动处理高度过渡，全程无需操作DOM。

方法二：直接操作DOM（使用Vue的ref） #

如果确实需要手动操作DOM，Vue提供了ref属性来安全获取元素，替代原生的DOM查询方法：

模板修改 #

给菜单元素添加ref标识：

<button class="menu__button"
        :class="{active:activeToggle}"
        @click="activeToggle = !activeToggle; menuToggle();">
</button>
<div class="menu" ref="menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

脚本逻辑调整 #

通过this.$refs.menu获取元素，配合setTimeout触发过渡动画：

export default{
    name: "Button",
    data(){
        return{
            activeToggle:false
        }
    },
    methods:{
        menuToggle(){
            const menuEl = this.$refs.menu;
            if(this.activeToggle){
                // 先设置display:flex，等待浏览器重绘后修改高度触发过渡
                menuEl.style.display = 'flex';
                setTimeout(() => {
                    menuEl.style.height = '22rem';
                }, 0);
            } else {
                // 先将高度设为0，过渡完成后再隐藏元素
                menuEl.style.height = '0';
                setTimeout(() => {
                    menuEl.style.display = 'none';
                }, 300); // 时长要和CSS过渡时长保持一致
            }
        },
    },
};

配套CSS样式 #

需要给菜单添加过渡基础样式：

.menu {
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

注意：方法二需要手动处理DOM和定时器，代码复杂度更高，也不符合Vue的设计理念，除非有特殊场景需求，否则优先选择方法一。

内容的提问来源于stack exchange，提问作者Dmitriy Shevchenko