v-bind

2017-03-10 本文已影响543人乖乖果效36

v-bind

缩写： :

类型： any (with argument) | Object (without argument)

参数： attrOrProp (optional)

修饰符：
.prop

被用于绑定 DOM 属性。(what’s the difference?)
.camel
transform the kebab-case attribute name into camelCase. (supported since 2.1.0)

用法：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class
或 style
特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class
和 style
绑定不支持数组和对象。

示例：

<!-- 绑定一个属性 -->
![](imageSrc)

<!-- 缩写 -->
![](imageSrc)

<!-- with inline string concatenation -->
![]('/path/to/images/' + fileName)

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

The .camel
modifier allows camelizing a v-bind
attribute name when using in-DOM templates, e.g. the SVG viewBox
attribute:
<svg :view-box.camel="viewBox"></svg>

.camel
is not needed if you are using string templates, or compiling with vue-loader
/vueify

Class 与 Style 绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用v-bind
处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind
用于 class
和 style
时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
绑定 HTML Class
对象语法
我们可以传给 v-bind:class
一个对象，以动态地切换 class 。
<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 classactive
的更新将取决于数据属性 isActive
是否为真值。
我们也可以在对象中传入更多属性用来动态切换多个 class 。此外， v-bind:class
指令可以与普通的 class 属性共存。如下模板:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

如下 data:
data: {
isActive: true,
hasError: false
}

渲染为:
<div class="static active"></div>

当 isActive
或者 hasError
变化时，class 列表将相应地更新。例如，如果 hasError
的值为 true
， class列表将变为 "static active text-danger"
。
你也可以直接绑定数据里的一个对象：
<div v-bind:class="classObject"></div>

data: {
classObject: {
active: true,
'text-danger': false
}
}

渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：
<div v-bind:class="classObject"></div>

data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}

数组语法
我们可以把一个数组传给 v-bind:class
，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]">

data: {
activeClass: 'active',
errorClass: 'text-danger'
}

渲染为:
<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class ，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]">

此例始终添加 errorClass
，但是只有在 isActive
是 true 时添加 activeClass
。
不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]">

用在组件上
这个章节假设你已经对 Vue 组件有一定的了解。当然你也可以跳过这里，稍后再回过头来看。

当你在一个定制的组件上用到 class
属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。
例如，如果你声明了这个组件:
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})

然后在使用它的时候添加一些 class：
<my-component class="baz boo"></my-component>

HTML 最终将被渲染成为:
<p class="foo bar baz boo">Hi</p>

同样的适用于绑定 HTML class :
<my-component v-bind:class="{ active: isActive }"></my-component>

当 isActive
为 true 的时候，HTML 将被渲染成为:
<p class="foo bar active"></p>

Prop
使用 Prop 传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props
选项声明 “prop”：
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})

然后向它传入一个普通字符串：
<child message="hello!"></child>

结果：
hello!
camelCase vs. kebab-case
HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

再次说明，如果你使用字符串模版，不用在意这些限制。
动态 Prop
类似于用 v-bind
绑定 HTML 特性到一个表达式，也可以用 v-bind
动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
<div>
<input v-model="parentMsg">

<child v-bind:my-message="parentMsg"></child>
</div>

使用 v-bind
的缩写语法通常更简单：
<child :my-message="parentMsg"></child>
.

v-bind

v-bind

猜你喜欢

热点阅读