05-Vue基础之Class 与 Style 绑定

个人名片：
😊作者简介：一名大二在校生
🤡 个人主页：坠入暮云间x
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡

上次我们对vue的计算属性和监视属性，有了初步了解，这次我们学习vue的样式绑定属性，vue.js中常用v-bind动态绑定属性，这次我从对象语法和数组语法下分别介绍该如何使用他们，让我们一起看下去吧！

动态绑定 HTML Class

1.对象语法

语法：给v-bind:class传一个对象，再动态的切换class
用法：<div v-bind:class="{ active: isActive }"></div>

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
<javascript type="text/css">
data: {
  isActive: true,
  hasError: false
}
</javascript>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。
active：data中的isActive是否为ture，若为ture将会显示，false则会隐藏

2.数组语法

语法：将数组传给v-bind:class，应用一个class列表
用法：<div v-bind:class="[activeClass, errorClass]"></div>

绑定内联样式——style

1.对象语法

语法：v-bind:style 后面跟一个对象，常用{}
用法：<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}
   <!-- '30px'必须加上单引号，否则当成一个变量解析 -->

2.数组语法

语法：v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
用法：<div v-bind:style="[baseStyles, overridingStyles]"></div>

以上是我对该知识点的总结，有什么不对的地方欢迎大家指出，互相学习，进步