.prop修饰符

543 阅读1分钟

.prop的修饰符用来指定绑定的值不应该被props解析,而应该作为dom的属性绑定在元素上。

下面的代码,是直接粘贴尤大大的单元测试的代码。我觉得没有比单元测试代码更能说明这个东西的用法了。

it('.prop modifier', () => { const vm = new Vue({ template: '

', data: { foo: 'hello', bar: 'qux' } }).mount()
    expect(vm.el.children[0].textContent).toBe('hello') expect(vm.$el.children[1].innerHTML).toBe('qux') })

另外对于这个修饰符,vue应该也提供了一个缩写的形式。即.text-content="foo"。 单元测试代码如下: it('.prop modifier shorthand', () => { const vm = new Vue({ template: '

<span .text-content="foo"><span .inner-html="bar">
', data: { foo: 'hello', bar: 'qux' } }).mount()
  expect(vm.el.children[0].textContent).toBe('hello') expect(vm.$el.children[1].innerHTML).toBe('qux') })