class="${staticClass}": Interpolation inside attributes has

Error message

class="${staticClass}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.

What it means

In the Weex template compiler, the class module detects interpolation ({{ }}) inside a static class attribute and warns that mixing interpolation into plain attributes is deprecated. The value is still parsed as dynamic (classResult), but you should migrate to v-bind:class / :class, which is the supported syntax.

Source

Thrown at src/platforms/weex/compiler/modules/class.js:20

import { parseText } from 'compiler/parser/text-parser'
import {
  getAndRemoveAttr,
  getBindingAttr,
  baseWarn
} from 'compiler/helpers'

type StaticClassResult = {
  dynamic: boolean,
  classResult: string
};

function transformNode (el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticClass = getAndRemoveAttr(el, 'class')
  const { dynamic, classResult } = parseStaticClass(staticClass, options)
  if (process.env.NODE_ENV !== 'production' && dynamic && staticClass) {
    warn(
      `class="${staticClass}": ` +
      'Interpolation inside attributes has been deprecated. ' +
      'Use v-bind or the colon shorthand instead.'
    )
  }
  if (!dynamic && classResult) {
    el.staticClass = classResult
  }
  const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
  if (classBinding) {
    el.classBinding = classBinding
  } else if (dynamic) {
    el.classBinding = classResult
  }
}

function genData (el: ASTElement): string {
  let data = ''

View on GitHub (pinned to 6c5d78ee04)

Solutions

Replace attribute interpolation with the bind shorthand: :class="'btn ' + activeClass" or :class="['btn', activeClass]".
Move dynamic classes into the data model and use object/array syntax: :class="{ active: isActive }".
Audit templates for {{ }} inside any attribute and convert them to v-bind/colon shorthand.

Example fix

// before
class="btn {{activeClass}}"
// after
:class="['btn', activeClass]"

Defensive patterns

Strategy: validation

Validate before calling

// lint-time guard for templates
function hasAttributeInterpolation(tpl) {
  return /(?:class|style)="[^"]*\{\{/.test(tpl)
}
// fail CI if hasAttributeInterpolation(templateSource) is true

Prevention

Never put {{ }} inside plain attributes; use :class / v-bind:class.
Prefer object/array class syntax: :class="{ active: isActive }".
Run vue/Weex compiler warnings in CI and treat deprecations as errors.
Update Vue 1.x templates when migrating to Vue 2.

When it happens

Trigger: Compiling a Weex template containing class="btn {{activeClass}}" or similar — the static class attribute contains {{...}} so parseStaticClass marks it dynamic, triggering the deprecation warning when staticClass is present.

Common situations: Templates copied from Vue 1.x code that allowed attribute interpolation; gradual Vue 1 → 2 migrations; hand-written templates mixing string concatenation habits with the new binding syntax.

Related errors

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/92eadef2eedc2e9d. Report an issue: GitHub.