[前端暴龙机，Vue2.x 进化 Vue3 ] Day13.Class 与 Style 绑定

除了资料的操作， Vue 也还可以跟 网页样式 有关系，除了内容可以用 v-if 做切换，拥有会员资格的是不是也可以让它的介面更华丽呢? 赶快来看看~

v-bind (缩写 `:` )

像是 Class、Style、src ... 等属性，都可以透过 v-bind 的绑定来做动态切换效果

Class 绑定

物件绑定方式

<div v-bind:class="{ class名称: isActive , class名称: hasError}"></div>
// ...
data: {
  isActive: true,
  hasError: false
}

使用方式为 class名称: boolean(true/false)，依照 boolean 去控制是否套用该 class

如何给定 boolean 值?

可以直接给 true/false ,但是就无法动态切换

<div v-bind:class="{ class名称: true , class名称: false}"></div>

可以给变数操作变数的 true/false 达成动态切换

<div v-bind:class="{ class名称: isActive }"></div>
// ...
data: {
  isActive: true,
}

可以透过物件定义完毕绑上去

<span :style="styleObject"></span>
// ...
data: {
    styleObject: {
        background: 'red',
        width: '150px',
        height: '150px',
    }
}

阵列绑定方式

<div v-bind:class="[activeClass, errorClass]"></div>
// ...
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

可以透过三元表达式切换 class

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
// ...
data: {
   isActive: false,
   activeClass: 'active',
   errorClass: 'text-danger'
}

// 就会渲染成 <div class="errorClass"></div>

Style 绑定

用法跟 :class 相像，不过虽然看起来像 css，其实是一个 JavaScript 对象(可以与变数及字串相加的动作)
CSS property 名称可用小驼峰(camelCase)或者短横线分隔(kebab-case，记得用引号括起来) 来命名，如下列范例

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px','border-right': `2px solid ${activeColor}`}">123</div>
// ...
data: {
  activeColor: 'red',
  fontSize: 30
}

同样可以透过物件定义完毕绑上去

<div v-bind:style="objStyle">textConent</div>
// ...
data: {
    objStyle:{
        color : 'red',
        fontSize: "30px",
        'border-right': "2px solid blue"
    }
}

如果绑定的内容太多，可运用此方式，使得模板更清晰