support filters in v-bind

yyx990803 · yyx990803 · commit 71ce60da9a35 · 2016-11-20T12:03:43.000-05:00
diff --git a/src/compiler/helpers.js b/src/compiler/helpers.js
@@ -1,5 +1,7 @@
 /* @flow */
 
+import { parseFilters } from './parser/filter-parser'
+
 export function baseWarn (msg: string) {
   console.error(`[Vue parser]: ${msg}`)
 }
@@ -72,7 +74,7 @@ export function getBindingAttr (
     getAndRemoveAttr(el, ':' + name) ||
     getAndRemoveAttr(el, 'v-bind:' + name)
   if (dynamicValue != null) {
-    return dynamicValue
+    return parseFilters(dynamicValue)
   } else if (getStatic !== false) {
     const staticValue = getAndRemoveAttr(el, name)
     if (staticValue != null) {
diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
@@ -3,6 +3,7 @@
 import { decode } from 'he'
 import { parseHTML } from './html-parser'
 import { parseText } from './text-parser'
+import { parseFilters } from './filter-parser'
 import { cached, no, camelize } from 'shared/util'
 import { isIE, isServerRendering } from 'core/util/env'
 import {
@@ -375,6 +376,7 @@ function processAttrs (el) {
       }
       if (bindRE.test(name)) { // v-bind
         name = name.replace(bindRE, '')
+        value = parseFilters(value)
         if (modifiers && modifiers.prop) {
           isProp = true
           name = camelize(name)
diff --git a/test/unit/features/filter/filter.spec.js b/test/unit/features/filter/filter.spec.js
@@ -29,6 +29,31 @@ describe('Filters', () => {
     expect(vm.$el.textContent).toBe('IH')
   })
 
+  it('in v-bind', () => {
+    const vm = new Vue({
+      template: `
+        <div
+          v-bind:id="id | upper | reverse"
+          :class="cls | reverse"
+          :ref="ref | lower">
+        </div>
+      `,
+      filters: {
+        upper: v => v.toUpperCase(),
+        reverse: v => v.split('').reverse().join(''),
+        lower: v => v.toLowerCase()
+      },
+      data: {
+        id: 'abc',
+        cls: 'foo',
+        ref: 'BAR'
+      }
+    }).$mount()
+    expect(vm.$el.id).toBe('CBA')
+    expect(vm.$el.className).toBe('oof')
+    expect(vm.$refs.bar).toBe(vm.$el)
+  })
+
   it('arguments', () => {
     const vm = new Vue({
       template: `<div>{{ msg | add(a, 3) }}</div>`,
diff --git a/test/unit/modules/compiler/codegen.spec.js b/test/unit/modules/compiler/codegen.spec.js
@@ -37,6 +37,13 @@ describe('codegen', () => {
     )
   })
 
+  it('generate filters', () => {
+    assertCodegen(
+      '<div :id="a | b | c">{{ d | e | f }}</div>',
+      `with(this){return _h('div',{attrs:{"id":_f("c")(_f("b")(a))}},[_s(_f("f")(_f("e")(d)))])}`
+    )
+  })
+
   it('generate v-for directive', () => {
     assertCodegen(
       '<li v-for="item in items" :key="item.uid"></li>',
