VueJS2能否动态绑定类名的部分内容？

当然可以实现！这种动态切换状态类的需求在前端开发里太常见了，不同的技术栈有不同的实现方式，我给你梳理几种常用的方案：

你可以通过classList API来操作元素的类，核心思路是先移除旧的状态类（比如alert-success、alert-danger这类），再添加动态生成的新类：

// 获取目标警告框元素
const alertBox = document.querySelector('.alert');
// 这里的status可以是动态获取的变量，比如从接口返回、用户操作触发等
const dynamicStatus = 'danger';

// 先移除所有可能的状态类（避免多个状态类共存）
alertBox.classList.remove('alert-success', 'alert-danger', 'alert-warning');
// 添加动态生成的新状态类
alertBox.classList.add(`alert-${dynamicStatus}`);

如果状态类的种类不确定，还可以用正则匹配来移除所有alert-开头的类，更灵活：

const alertBox = document.querySelector('.alert');
const dynamicStatus = 'warning';

// 移除所有alert-开头的类
alertBox.className = alertBox.className.replace(/\balert-\S+/g, '').trim();
// 添加新类
alertBox.classList.add(`alert-${dynamicStatus}`);

如果你在用jQuery，操作会更简洁：

const dynamicStatus = 'success';
// 先移除旧状态类，再添加新类
$('.alert').removeClass('alert-success alert-danger alert-warning').addClass(`alert-${dynamicStatus}`);

同样也可以用正则批量移除：

const dynamicStatus = 'info';
$('.alert').removeClass(function(index, currentClass) {
  // 匹配所有alert-开头的类并移除
  return (currentClass.match(/\balert-\S+/g) || []).join(' ');
}).addClass(`alert-${dynamicStatus}`);

Vue的动态class语法天生适合这种场景，直接在模板里绑定即可：

<template>
  <div 
    class="alert alert-dismissible"
    :class="`alert-${status}`"
  >
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-check"></i> Alert!</h4>
    {{ alertMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这个status可以随时修改，类会自动更新
      status: 'success',
      alertMessage: 'Success alert preview. This alert is dismissable.'
    }
  }
}
</script>

如果你想更严谨（比如避免无效状态），也可以用对象语法：

<div 
  class="alert alert-dismissible"
  :class="{
    'alert-success': status === 'success',
    'alert-danger': status === 'danger',
    'alert-warning': status === 'warning'
  }"
>
  <!-- 内容 -->
</div>

React里可以通过模板字符串生成完整的类名：

function Alert({ status, message }) {
  // 动态拼接类名
  const alertClass = `alert alert-dismissible alert-${status}`;
  
  return (
    <div className={alertClass}>
      <button type="button" className="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i className="icon fa fa-check"></i> Alert!</h4>
      {message}
    </div>
  );
}

// 使用时传入动态的status
<Alert status="danger" message="Danger alert preview. This alert is dismissable." />

核心思路总结 #

本质上，DOM元素的类是完整的字符串集合，没办法直接修改某个类名的“一部分”，但我们可以通过动态生成完整的目标类名，再替换或添加到元素上，从而实现你要的效果——让alert-后面的状态部分动态变化。

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