v-bind -- 知识 · vue3.x -- 系列学习

[TOC] >[success] # v-bind -- 改动知识点 [attribute 强制行为](https://www.kancloud.cn/cyyspring/vue3/2697033) >[success] # v-bind -- 之前使用较少知识点 >[danger] ##### 动态key * 和es6 一样在 vue 模板时候也可以动态key 去和v-bind 进行绑定具体语法如下 ~~~html <button v-bind:[key]="value"></button> <h2 :[name]="'aaaa'">Hello World</h2> <img :src="imageSrc" /> ~~~ >[danger] ##### 展开对象 * 可以将一组属性定义为对象。利用v-bind 对其进行展开具体语法如下 ~~~html <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> 也可以将对象定义到data中 ~~~ * 如图因为someProp和otherProp 在data 中定义为 1和2 ![](https://img.kancloud.cn/20/10/20106b425e59536caca0d5c4b408593f_433x108.png) >[danger] ##### class * `class `还支持下面三种形式'对象'，'数组'，'数组对象' ~~~html <div :class="{ red: isRed,active: isRed,zz: true,}"></div>  <div :class="[classA, classB,"zz"]"></div> <div :class="[classA, { classB: isB, classC: isC }]"></div> <h2 :class="['abc', className, isActive? 'active': '']"></h2> ~~~ * 案例 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app">  <div :class="normalClass"></div>  <div :class="{ red: isRed }"></div>  <div :class="[classA, 'classB']"></div>  <div :class="[classA, { classB: isB }]"></div> </div>  <script src="https://unpkg.com/vue@next"></script> <script> const vm = Vue.createApp({ data() { return { normalClass: 'normalClass', isRed: false, classA: { isRed: true, }, isB: true, } }, methods: {}, }).mount('#app') </script> </body> </html> ~~~ * 如图 ![](https://img.kancloud.cn/e8/71/e871e9ef7d452c4faa42a930d66a05b9_375x77.png) >[danger] ##### style * 除了正常写法也支持 '对象' 和'数组'，要注意如果key 是类似'font-size'属性需要驼峰写法，如果不驼峰写法需要用引号包裹 ~~~html <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB,{ backgroundColor: 'purple' }]"></div> ~~~ * 案例 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> </div>  <script src="https://unpkg.com/vue@next"></script> <script> const vm = Vue.createApp({ data() { return { size: 10, styleObjectA: { fontSize: 10, color: 'red', }, styleObjectB: { height: '20px', }, } }, methods: {}, }).mount('#app') </script> </body> </html> ~~~ * 如图 ![](https://img.kancloud.cn/5d/4b/5d4b13aa352125c3f9e69816c2aaa4f5_397x99.png)