如何在脚本中直接修改Bootstrap按钮的类工具类属性值？

算力阿峰

2026-8-19

解决方案

这里提供几种直接修改按钮类名的方法，按Vue推荐程度排序：

1. 数据驱动的动态class绑定（最推荐）

这种方式完全符合Vue的响应式思想，不用直接操作DOM元素：

模板修改：

<b-button
  id="search-button"
  size="md"
  :class="['mt-1', btnWidthClass]"
  type="submit"
  @click="someEvent()"
>
Example
</b-button>

脚本实现：

export default {
  data() {
    return {
      btnWidthClass: 'w-100' // 初始类名
    }
  },
  methods: {
    someEvent() {
      this.btnWidthClass = 'w-90' // 点击后替换宽度类
    }
  }
}

2. 使用Vue Refs访问元素

通过ref引用获取按钮实例，然后操作元素的classList：

模板修改：

<b-button
  id="search-button"
  size="md"
  class="mt-1 w-100"
  type="submit"
  @click="someEvent()"
  ref="searchBtn"
>
Example
</b-button>

脚本实现：

export default {
  methods: {
    someEvent() {
      const btnElement = this.$refs.searchBtn
      btnElement.classList.remove('w-100')
      btnElement.classList.add('w-90')
    }
  }
}

3. 直接操作DOM（不推荐）

如果一定要直接通过DOM API修改，利用按钮的id获取元素：

脚本实现：

export default {
  methods: {
    someEvent() {
      const btnElement = document.getElementById('search-button')
      btnElement.classList.remove('w-100')
      btnElement.classList.add('w-90')
    }
  }
}