Vue – 属性绑定v-bind

本文带来关于Vue中的属性绑定方法v-bind的使用教程。

v-bind

v-bind 用于绑定元素原始属性的值，可双相绑定，使用方法如下

若需要绑定元素中的 placeholder 属性，可使用 v-bind:placeholder="foo" 进行绑定。

因v-bind使用频率较高，所以Vue2提供v-bind的缩略写法成 :，如下

:placeholder="foo"

JS表达式

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JS表达式运算，例如

<div :id="'list-' + id"></div>

三元运算表达式

<div :id="ok? 'YES' : 'NO'"></div>

在v-bind绑定的引用内容里，可以看作是JS环境

<div :id="--Javascript环境--"></div>