VanJS中如何添加动态类？状态更新后类未同步问题

API 探路者

2026-7-11

问题原因

你遇到的核心问题是没有建立VanJS状态与DOM属性的响应式绑定：

你直接读取了divider.val的静态值计算class，VanJS无法追踪这个依赖关系
组件初始化时仅计算一次class值，后续divider状态更新时，不会触发class的重新计算

解决办法

在VanJS中，要让DOM属性随状态动态更新，需要将属性值定义为函数，VanJS会自动追踪函数内用到的状态，当状态变化时重新执行函数并更新DOM属性。

修改后的DividerList组件代码：

const DividerList = ({ N, divider }) => {
  return Array.from({ length: N.val }, (_, i) => i + 1).map((i) =>
    div(
      {
        onclick: () => (divider.val = i),
        // 将class设为函数，动态计算类名
        class: () => `divider-item ${i % divider.val === 0 ? "green" : "red"}`,
      },
      i
    )
  );
};

TypeScript版本修改方式一致：

import van, { State } from "vanjs-core";

const { div } = van.tags;

export const DividerList = ({
  N,
  divider,
}: {
  N: State<number>;
  divider: State<number>;
}) => {
  return Array.from({ length: N.val }, (_, i) => i + 1).map((i) =>
    div(
      {
        onclick: () => (divider.val = i),
        class: () => `divider-item ${i % divider.val === 0 ? "green" : "red"}`,
      },
      i
    )
  );
};

原理说明

VanJS的响应式系统基于依赖追踪：