setProp() — vue Function Reference

Architecture documentation for the setProp() function in style.ts from the vue codebase.

Function typescript WebPlatform WebRuntime calls 2 called by 1

Entity Profile

WebPlatform→ WebRuntime→ setProp() — vue Function Reference

Dependency Diagram

graph TD
  2bc00625_4c85_43e2_d223_5de834ee1789["setProp()"]
  f4b573c3_a3cb_6a57_b5c1_058edeb470d4["updateStyle()"]
  f4b573c3_a3cb_6a57_b5c1_058edeb470d4 -->|calls| 2bc00625_4c85_43e2_d223_5de834ee1789
  e78b8b23_1803_b152_f10f_06b6c4015dc9["hyphenate()"]
  2bc00625_4c85_43e2_d223_5de834ee1789 -->|calls| e78b8b23_1803_b152_f10f_06b6c4015dc9
  81fec14a_c1fd_2462_55e7_d9e294dec821["normalize()"]
  2bc00625_4c85_43e2_d223_5de834ee1789 -->|calls| 81fec14a_c1fd_2462_55e7_d9e294dec821
  style 2bc00625_4c85_43e2_d223_5de834ee1789 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/modules/style.ts lines 14–37

const setProp = (el, name, val) => {
  /* istanbul ignore if */
  if (cssVarRE.test(name)) {
    el.style.setProperty(name, val)
  } else if (importantRE.test(val)) {
    el.style.setProperty(
      hyphenate(name),
      val.replace(importantRE, ''),
      'important'
    )
  } else {
    const normalizedName = normalize(name)
    if (Array.isArray(val)) {
      // Support values array created by autoprefixer, e.g.
      // {display: ["-webkit-box", "-ms-flexbox", "flex"]}
      // Set them one by one, and the browser will only set those it can recognize
      for (let i = 0, len = val.length; i < len; i++) {
        el.style[normalizedName!] = val[i]
      }
    } else {
      el.style[normalizedName!] = val
    }
  }
}