测试开发技术网站

[【原文链接】Vue----Vue属性绑定](http://devops-dev.com/article/648)

通过v-bind:xxx 的方式即可实现Vue的属性绑定，比如如下代码，为div标签增加class属性，class的属性值通过msg变量提供
```html
<template>
  <div v-bind:class="msg">测试属性绑定</div>
</template>

运行结果在浏览器打开，并右键-检查，查看如下图所示，这里div标签的class属性就变成active了
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/02dfcf38-0f7b-11ee-89a7-0242ac110004.png)

因为v-bind非常常用，因此v-bind还可以简写，即直接使用冒号即可，如下所示
```html
<template>
  <div :class="msg">测试属性绑定</div>
</template>

绑定属性比如对如下代码中动态的设置按钮是否可点击，这种用法还是非常好用的，即可以根据具体的场景动态的设置isDisabled的变量的值，而更具isDisabled变量的值决定按钮是否可以点击。
```html
<template>
  <div :class="msg">测试属性绑定</div>
  <button :disabled="isDisabled">启动</button>
</template>

此外，还可以通过对象的形式同时设置多个属性，比如如下代码中，通过v-bind直接指定button_attr对象，则可以同时设置两个属性。
```html
<template>
  <div :class="msg">测试属性绑定</div>
  <button v-bind="button_attr">启动</button>
</template>

测试开发技术网站

博客