v-bind的介绍和使用

v-bind的介绍和使用

v-bind:需要动态决定标签的属性的时候 可以使用到v-bind
语法糖的写法: :,吧v-bind替换为:
例如：动态绑定a标签的href属性,动态绑定img的src属性
在需要动态绑定的属性前面加上v-bind就会自动去vue实例里面去找当前的属性去进行设置

<!--普通写法-->
 <img v-bind:src="imageUrl"/>
 <!--语法糖写法-->
 <img :src="imageUrl"/>
imageUrl:"https://i2.hdslb.com/bfs/face/c850c18ae6b507d0ef34837f53a51090b6a7451f.jpg@68w_68h.webp",

v-bind动态绑定class:对象语法
当value值为true的时候才会添加到class里面

<h2 :class="{ key : true, key1 : false}">{{site}}</h2>

用法一：直接通过{}绑定一个类
<h2 :class="{ 'active': isActive}">hello world</h2>

用法二：直接通过判断，传入多个值，
<h2 :class="{'active': isActive,'line': isLine}">hello world</h2>

用法三：和普通的类同时存在,并不冲突
<h2 class="title" :class="{'active': isActive,'line': isLine}">hello world</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
<h2 class="title" :class="getClasses()">hello world</h2>

v-bind动态绑定class:数组语法

<h2 :class="['active','line]">hello world</h2>

v-bind动态绑定style:对象语法

<h2 :style="{'key(属性名)': value(属性值)}">hello world</h2>
//如果有-的属性需要加单引号 也可以使用驼峰命名  后面属性如果不是变量需要用单引号 
<h2:style="{'font-size':'50px'}">{{site}}</h2>
<h2:style="{fontSize:'50px'}">{{site}}</h2>
<h2:style="{fontSize:finalSize}">{{site}}</h2>