Browse Source

support filters in v-bind

dev
Evan You 8 years ago
parent
commit
71ce60da9a
  1. 4
      src/compiler/helpers.js
  2. 2
      src/compiler/parser/index.js
  3. 25
      test/unit/features/filter/filter.spec.js
  4. 7
      test/unit/modules/compiler/codegen.spec.js

4
src/compiler/helpers.js

@ -1,5 +1,7 @@
/* @flow */ /* @flow */
import { parseFilters } from './parser/filter-parser'
export function baseWarn (msg: string) { export function baseWarn (msg: string) {
console.error(`[Vue parser]: ${msg}`) console.error(`[Vue parser]: ${msg}`)
} }
@ -72,7 +74,7 @@ export function getBindingAttr (
getAndRemoveAttr(el, ':' + name) || getAndRemoveAttr(el, ':' + name) ||
getAndRemoveAttr(el, 'v-bind:' + name) getAndRemoveAttr(el, 'v-bind:' + name)
if (dynamicValue != null) { if (dynamicValue != null) {
return dynamicValue return parseFilters(dynamicValue)
} else if (getStatic !== false) { } else if (getStatic !== false) {
const staticValue = getAndRemoveAttr(el, name) const staticValue = getAndRemoveAttr(el, name)
if (staticValue != null) { if (staticValue != null) {

2
src/compiler/parser/index.js

@ -3,6 +3,7 @@
import { decode } from 'he' import { decode } from 'he'
import { parseHTML } from './html-parser' import { parseHTML } from './html-parser'
import { parseText } from './text-parser' import { parseText } from './text-parser'
import { parseFilters } from './filter-parser'
import { cached, no, camelize } from 'shared/util' import { cached, no, camelize } from 'shared/util'
import { isIE, isServerRendering } from 'core/util/env' import { isIE, isServerRendering } from 'core/util/env'
import { import {
@ -375,6 +376,7 @@ function processAttrs (el) {
} }
if (bindRE.test(name)) { // v-bind if (bindRE.test(name)) { // v-bind
name = name.replace(bindRE, '') name = name.replace(bindRE, '')
value = parseFilters(value)
if (modifiers && modifiers.prop) { if (modifiers && modifiers.prop) {
isProp = true isProp = true
name = camelize(name) name = camelize(name)

25
test/unit/features/filter/filter.spec.js

@ -29,6 +29,31 @@ describe('Filters', () => {
expect(vm.$el.textContent).toBe('IH') 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', () => { it('arguments', () => {
const vm = new Vue({ const vm = new Vue({
template: `<div>{{ msg | add(a, 3) }}</div>`, template: `<div>{{ msg | add(a, 3) }}</div>`,

7
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', () => { it('generate v-for directive', () => {
assertCodegen( assertCodegen(
'<li v-for="item in items" :key="item.uid"></li>', '<li v-for="item in items" :key="item.uid"></li>',

Loading…
Cancel
Save