style="${staticStyle}": Interpolation inside attributes has

Error message

style="${staticStyle}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">.

What it means

The mp compiler found mustache interpolation inside a static `style` attribute. Since Vue 2, attribute interpolation is unsupported; dynamic styles must use v-bind. The warning is emitted during compilation in dev builds.

Source

Thrown at src/platforms/mp/compiler/modules/style.js:19

/* @flow */

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

function transformNode (el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticStyle = getAndRemoveAttr(el, 'style')
  if (staticStyle) {
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production') {
      const expression = parseText(staticStyle, options.delimiters)
      if (expression) {
        warn(
          `style="${staticStyle}": ` +
          'Interpolation inside attributes has been removed. ' +
          'Use v-bind or the colon shorthand instead. For example, ' +
          'instead of <div style="{{ val }}">, use <div :style="val">.'
        )
      }
    }
    el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
  }

  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
  if (styleBinding) {
    el.styleBinding = styleBinding
  }
}

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

View on GitHub (pinned to 6c5d78ee04)

Solutions

Use :style="val" (v-bind:style) instead of style="{{ val }}".
Pass style objects/arrays via v-bind: :style="{ color: textColor }".
Keep purely static CSS in a plain style attribute without mustaches.

Example fix

// before
<div style="color: {{ textColor }}">
// after
<div :style="{ color: textColor }">

Defensive patterns

Strategy: validation

Validate before calling

function assertNoStyleInterpolation (template) {
  if (/style\s*=\s*["'][^"']*\{\{/.test(template)) {
    throw new Error('Interpolation in style attr; use :style instead')
  }
}
assertNoStyleInterpolation('<div style="width: {{ w }}px">')

Type guard

const isStaticStyle = (styleVal) => typeof styleVal === 'string' && !styleVal.includes('{{');

Prevention

Use :style with objects/arrays for dynamic styles
Lint templates with eslint-plugin-vue to catch legacy syntax
Audit Vue 1 templates during migration with a regex scan for style="{{
Compile in dev mode so the warning is visible

When it happens

Trigger: Compiling an element with style="{{ someStyle }}" (delimiters present in the static style attribute value) via transformNode when NODE_ENV is not production.

Common situations: Vue 1 to Vue 2 migration; old templates where styles were interpolated; misunderstanding that text interpolation applies to attributes.

Related errors

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