如何根据变量的不同取值为div元素添加对应自定义类

核心思路 #

固定保留基础类layout，根据变量layoutColumn的取值（1-4），动态拼接layoutCol${layoutColumn}类名，将两者组合后赋值给div的class属性即可。

原生JavaScript实现 #

纯前端原生场景下，直接操作DOM元素：

// 用户选择的列数变量
const layoutColumn = 1; // 可取值1/2/3/4
// 获取目标div（需提前给div设置id）
const targetDiv = document.getElementById('target-layout');

// 方式1：直接覆盖类名（适合无需保留原有其他类的场景）
targetDiv.className = `layout layoutCol${layoutColumn}`;

// 方式2：添加类名（适合需要保留原有类的场景）
targetDiv.classList.add('layout', `layoutCol${layoutColumn}`);

Vue 项目实现 #

利用Vue动态class绑定语法实现：

<template>
  <!-- 数组语法组合固定类与动态类 -->
  <div :class="['layout', `layoutCol${layoutColumn}`]"></div>
</template>

<script>
export default {
  data() {
    return {
      layoutColumn: 1 // 绑定用户选择的数值
    };
  }
};
</script>

React 项目实现 #

通过模板字符串拼接类名：

import React, { useState } from 'react';

export default function Layout() {
  // 用state管理用户选择的列数
  const [layoutColumn, setLayoutColumn] = useState(1);

  return (
    <div className={`layout layoutCol${layoutColumn}`}></div>
  );
}

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