动态绑定 class 的几种实现方式 - Vue

日常开发中难免会遇到动态渲染修改样式的需求出现，So 简单归纳如下三种实现方式，虽然还是学时的时候有所了解但事后很久不在接触，此次重新初识前端不久，哪里可以更优还请大佬多多指教！

 

方式一：通过Class 与 Style 绑定的方式

即三目运算的判断方式设置样式，也是 Vue 官方推荐的方式，具体 code 实现如下：

html 代码片段

点击抽题

js 代码片段

css 代码片段

 

 

方式二：基础样式与动态样式同时存在

 

 

方式三：通过将 html 元素设置 id 的方式

该方式应该算是一个较为老套的方式，预先将对应的组件设置 id 唯一属性；
随后在按钮 js 的点击事件中获取到当前元素后对其样式进行修改；
即 document.getElementById("组件预先设置的 id 值").style.color="#F4F5F6"

---

以上便是此次分享的全部内容，希望能对大家有所帮助！