Vue2如何使用$refs定位目标元素并移除对应CSS类

原有代码问题说明 #

你写的代码存在两个常见错误：

• 给普通HTML元素绑定ref时，this.$refs.xxx直接返回对应原生DOM对象，不需要额外加. $el属性；. $el是用于获取自定义组件实例的根DOM元素的属性
• 原生DOM没有removeClass方法，该方法是jQuery提供的API，原生DOM操作类名需使用classList系列方法

正确实现代码 #

模板代码（无需修改）

<div class="modal" ref="myModal"></div>

方法代码

closeDropdown: function() {
  this.$refs.myModal.classList.remove("open");
}

特殊情况说明 #

如果你的ref是绑定在自定义组件上，需要先通过$el获取组件根DOM再操作：

closeDropdown: function() {
  this.$refs.myModal.$el.classList.remove("open");
}

扩展：classList 常用方法 #

• classList.add('类名')：添加指定类名
• classList.remove('类名')：移除指定类名
• classList.toggle('类名')：切换指定类名（存在则移除，不存在则添加）
• classList.contains('类名')：判断是否包含指定类名，返回布尔值

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