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

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

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

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

html 代码片段


js 代码片段


css 代码片段


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

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

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


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

你可能感兴趣的:(动态绑定 class 的几种实现方式 - Vue)