回首Vue3之指令篇（六）

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

这篇文章咱们来说一下v-bind的使用方法，以及在使用它的时候咱们须要注意的地方。

如何使用

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绑定方法。

注意事项

值得咱们注意的是：

1. 上述内容咱们也能够用模板字符串来写。

<div :style="{ fontSize: `${size}px`}"></div>
复制代码

2. .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的自定义属性仅仅是合在一块儿，在使用的时候咱们须要注意一下。

3. 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>
复制代码

总结

1. 在Vue3中，若是一个元素同时定义了 v-bind="object" 和一个相同的单独的 property，那么声明绑定的顺序决定了它们如何合并。

2. CSS property 名能够用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

3. 根据本身的需求场景来选择合适的使用方式。