improve class interpoations (fix #1960)

Author: yyx990803

package.json

@@ -27,7 +27,7 @@
     "build": "node build/build.js",
     "install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
     "dev": "webpack --watch --config build/webpack.dev.config.js & npm run serve-test",
-    "serve-test": "webpack-dev-server --config build/webpack.test.config.js",
+    "serve-test": "webpack-dev-server --config build/webpack.test.config.js --host 0.0.0.0",
     "build-test": "webpack --config build/webpack.test.config.js",
     "lint": "eslint src/** test/e2e/** test/unit/specs/** build/**.js",
     "e2e": "casperjs test --concise ./test/e2e",

src/compiler/compile.js

@@ -652,8 +652,12 @@ function compileDirectives (attrs, options) {
     // attribute interpolations
     if (tokens) {
       value = tokensToExp(tokens)
-      arg = name
-      pushDir('bind', publicDirectives.bind, true)
+      if (name === 'class') {
+        pushDir('class', internalDirectives['class'], true)
+      } else {
+        arg = name
+        pushDir('bind', publicDirectives.bind, true)
+      }
       // warn against mixing mustaches with v-bind
       if (process.env.NODE_ENV !== 'production') {
         if (name === 'class' && Array.prototype.some.call(attrs, function (attr) {

src/directive.js

@@ -10,6 +10,7 @@ import {
   warn
 } from './util/index'
 import Watcher from './watcher'
+import { removeTags } from './parsers/text'
 import { parseExpression, isSimplePath } from './parsers/expression'
 
 function noop () {}
@@ -82,7 +83,15 @@ Directive.prototype._bind = function () {
     this.el && this.el.removeAttribute
   ) {
     var attr = descriptor.attr || ('v-' + name)
-    this.el.removeAttribute(attr)
+    if (attr !== 'class') {
+      this.el.removeAttribute(attr)
+    } else {
+      // for class interpolations, only remove the parts that
+      // need to be interpolated.
+      this.el.className = removeTags(this.el.className)
+        .trim()
+        .replace(/\s+/g, ' ')
+    }
   }
 
   // copy def properties

src/parsers/text.js

@@ -159,3 +159,14 @@ function inlineFilters (exp, single) {
     }
   }
 }
+
+/**
+ * Replace all interpolation tags in a piece of text.
+ *
+ * @param {String} text
+ * @return {String}
+ */
+
+export function removeTags (text) {
+  return text.replace(tagRE, '')
+}

test/unit/specs/compiler/compile_spec.js

@@ -516,12 +516,12 @@ describe('Compile', function () {
       }
     })
     expect(el.firstChild.id).toBe('aaa')
-    expect(el.firstChild.className).toBe('b ccc d')
+    expect(el.firstChild.className).toBe('b d ccc')
     vm.a = 'aa'
     vm.c = 'cc'
     _.nextTick(function () {
       expect(el.firstChild.id).toBe('aa')
-      expect(el.firstChild.className).toBe('b cc d')
+      expect(el.firstChild.className).toBe('b d cc')
       done()
     })
   })