Vue.js开发连载四之vue.js指令v-bind

上一篇文章讲解“vue.js指令v-text”，本篇文章讲解“vue.js指令v-bind”。

v-bind可以把你在data中定义的数据和元素属性进行关联。

1. v-bind

【例】设置p标签的align属性居中。

浏览器访问：

2. v-bind简写

“v-bind”可简写为“:”，比如上面的例子：

3. 绑定表达式

v-bind可以绑定js表达式。

【例】当data中变量position值为1时，p标签居中，position值为其他时，p标签居左。

浏览器访问：

当将data下的变量position设为1时，p标签将会居中显示。

4. 绑定class

这里对于class和style的绑定比较特殊，所以单独拿出来讲解。

1）对象——v-bind:class="{}"

对象的键为class名，值为Boolean，为true对应的class才生效。

【例】为p标签添加三个class值，fontRed、font-bgcolor、font-big分别用样式设置p标签的颜色、背景色、字体大小，并用变量isShow设置class值是否生效。

注意

1. 对象中键带有连接符（-）时，需要用引号。

浏览器预览：

2）数组——v-bind:class="[ ]"

数组的值为class名

浏览器访问：

数组中将对象作为一个值

浏览器访问：

5. 绑定style —— v-bind:style="{}"

绑定style对象语法十分直观，看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebab-case，记得用单引号括起来）来命名。

【例】设置p标签的颜色为红色，字体大小为20px。

浏览器访问：

注意

1. 当v-bind:style使用需要添加浏览器引擎前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。

测验：

1. 如何用:style和:class分别做一个背景颜色为#ccc，高度/宽度为100px的div，并设置div的 contenteditable="true"，实现一个可输入内容的div。

测验（有很多种做法，以下仅作为参考）：

浏览器访问：

Vue.js连载为卓象程序员原创，转载请联系卓象程序员

关注卓象程序员，定期发布技术文章

下一篇讲解“vue.js指令v-if+v-else+v-else-if”