【vue】谈谈vue的样式绑定

[yayxs]

---

title: class style 动态绑定

vue 中如何动态的绑定 样式 也就是所谓的 class 与 style 最直观的就是 文档中的描述
Class 与 Style 绑定

<section class=""></section>
<section style=""></section>

计算得来的结果不仅是字符串 也可以是对象 | 数组

绑定HTML的 class

对象的形式

我们可以把对象提到 js 中

<!-- 以对象的方式 -->
<section class="container" :class="{active:isActive,'text-err':textErr}">
  class绑定
</section>

return {
  isActive: true,
  textErr: true,
};

.container {
  width: 100px;
  height: 50px;
}
.active {
  border: 1px solid red;
}
.text-err {
  color: pink;
}

数组的形式

<section class="container" :class="[firClass,secClass]">class绑定</section>

return {
  firClass: "active",
  textErr: "text-err",
};

或者说对象的形式和数组的形式结合在一起

<section class="container" :class="[{active:isActive},secClass]">
  class绑定
</section>

其中数组第 1 项 将是动态的添加或者不添加 但是 secClass 这个始终是添加的

---

还有一种形式就是 style 内联样式了

绑定内联样式

对象的形式

<section :style="{color:activeColor,fontSize:fontSize+'px'}">style绑定</section>

return {
  activeColor: "red",
  fontSize: "30",
};

但是习惯上我们通常绑定个样式对象

return {
  styleObj: {
    color: "pink",
    fontSize: "20px",
  },
};

<section :style="styleObj">style绑定</section>

数组形式

<div v-bind:style="[baseStyles, overridingStyles]"></div>