如何使用

v-bind指令：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。

v-bind可简写为:。

绑定 attribute

//固定绑定
<img :src="imageSrc" />

//动态绑定
<button :[key]="value"></button>

从上述代码可以看出，我们不仅可以固定的绑定一个属性，还可以去动态的绑定一个属性。

class 绑定

//对象
<div :class="{ red: isRed }"></div>

//数组
<div :class="[classA, classB]"></div>

//数组对象
<div :class="[classA, { classB: isB, classC: isC }]">

//动态数据，可以是一个字符串，也可以是个对象
<div :class="class"></div>

//表达式，三元运算
<div :class="isTrue?'trueClass':'falseClass'"></div>

从上述代码可以看出，我们可以根据自己的需求选择一个合适的class绑定方法，class绑定在我们项目开发中经常用到，比如状态切换，动态的改变样式等。

style 绑定

//对象
<div :style="{ fontSize: size + 'px' }"></div>

//数组
<div :style="[styleObjectA, styleObjectB]"></div>

//多重值 只会渲染数组中最后一个被浏览器支持的值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

从上述代码可以看出，我们可以根据自己的需求选择一个合适的style绑定方法。

注意事项

值得我们注意的是：

上述内容我们也可以用模板字符串来写。

<div :style="{ fontSize: `${size}px`}"></div>

.camel 修饰符允许在使用 DOM 模板时将 v-bind property 名称驼峰化

//编译前
<svg :view-box.camel="viewBox" :test-test.camel="viewBox"></svg>
<div :test-test.camel="viewBox"></div>

//编译后
<svg viewBox="viewBox" testTest="viewBox"></svg>
<div testtest="viewBox"></div></div>

从上述代码可以看出，SVG 的 viewBox property和自定义属性是驼峰化，而div的自定义属性仅仅是合在一起，在使用的时候我们需要注意一下。

v-bind 合并行为在Vue3与Vue2中的差异

在Vue2中，单独的 property 总是会覆盖 v-bind="object" 中的绑定,如下：

//编译前
<div id="red" v-bind="{ id: 'blue' }"></div>
或
<div v-bind="{ id: 'blue' }" id="red" ></div>

//编译后
<div id="red"></div>

在Vue3中，单独的 property 与 v-bind="object" 的合并是按顺序覆盖的,如下：

//编译前
<div id="red" v-bind="{ id: 'blue' }"></div>
//编译后
<div id="blue"></div>

//编译前
<div v-bind="{ id: 'blue' }" id="red" ></div>
//编译后
<div id="red"></div>

总结

在Vue3中，如果一个元素同时定义了 v-bind="object" 和一个相同的单独的 property，那么声明绑定的顺序决定了它们如何合并。
CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。
根据自己的需求场景来选择合适的使用方式。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之指令篇（六）

如何使用

绑定 attribute

class 绑定

style 绑定

注意事项

总结