Browse Source

support :style bind to text in SSR too

Evan You 9 years ago
parent
commit
b283f53fd0

+ 3 - 1
src/platforms/web/compiler/modules/class.js

@@ -20,7 +20,9 @@ function transformNode (el: ASTElement, options: CompilerOptions) {
       )
     }
   }
-  el.staticClass = JSON.stringify(staticClass)
+  if (staticClass) {
+    el.staticClass = JSON.stringify(staticClass)
+  }
   const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
   if (classBinding) {
     el.classBinding = classBinding

+ 5 - 5
src/platforms/web/runtime/modules/style.js

@@ -21,17 +21,17 @@ const normalize = cached(function (prop) {
 })
 
 function updateStyle (oldVnode: VNodeWithData, vnode: VNodeWithData) {
-  if (!oldVnode.data.style && !vnode.data.style) {
+  if ((!oldVnode.data || !oldVnode.data.style) && !vnode.data.style) {
     return
   }
   let cur, name
-  const elm: any = vnode.elm
+  const el: any = vnode.elm
   const oldStyle: any = oldVnode.data.style || {}
   let style: any = vnode.data.style || {}
 
   // handle string
   if (typeof style === 'string') {
-    elm.setAttribute('style', style)
+    el.style.cssText = style
     return
   }
 
@@ -50,14 +50,14 @@ function updateStyle (oldVnode: VNodeWithData, vnode: VNodeWithData) {
 
   for (name in oldStyle) {
     if (!style[name]) {
-      elm.style[normalize(name)] = ''
+      el.style[normalize(name)] = ''
     }
   }
   for (name in style) {
     cur = style[name]
     if (cur !== oldStyle[name]) {
       // ie9 setting to null has no effect, must use empty string
-      elm.style[normalize(name)] = cur || ''
+      el.style[normalize(name)] = cur || ''
     }
   }
 }

+ 12 - 7
src/platforms/web/server/modules/style.js

@@ -6,15 +6,20 @@ export default function renderStyle (node: VNodeWithData): ?string {
   const staticStyle = node.data.attrs && node.data.attrs.style
   if (node.data.style || staticStyle) {
     let styles = node.data.style
-    let res = ' style="'
+    let res = ''
     if (styles) {
-      if (Array.isArray(styles)) {
-        styles = toObject(styles)
-      }
-      for (const key in styles) {
-        res += `${hyphenate(key)}:${styles[key]};`
+      if (typeof styles === 'string') {
+        res += styles
+      } else {
+        if (Array.isArray(styles)) {
+          styles = toObject(styles)
+        }
+        for (const key in styles) {
+          res += `${hyphenate(key)}:${styles[key]};`
+        }
+        res += staticStyle
       }
     }
-    return res + (staticStyle || '') + '"'
+    return ` style=${JSON.stringify(res)}`
   }
 }

+ 14 - 0
test/ssr/ssr-string.spec.js

@@ -72,6 +72,20 @@ describe('SSR: renderToString', () => {
     })
   })
 
+  it('dynamic string style', done => {
+    renderVmWithOptions({
+      template: '<div :style="style"></div>',
+      data: {
+        style: 'color:red'
+      }
+    }, result => {
+      expect(result).toContain(
+        '<div server-rendered="true" style="color:red"></div>'
+      )
+      done()
+    })
+  })
+
   it('text interpolation', done => {
     renderVmWithOptions({
       template: '<div>{{ foo }} side {{ bar }}</div>',