support filters in v-bind

This commit is contained in:
Evan You 2016-11-14 17:36:01 -05:00
parent 30f890cf3c
commit 71ce60da9a
4 changed files with 37 additions and 1 deletions

View File

@ -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) {

View File

@ -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)

View File

@ -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>`,

View File

@ -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>',