HTML中带冒号的:class属性有什么作用？是否被标准支持？

:class的核心功能 #

:class是Vue等前端框架提供的模板语法（全称是v-bind:class，冒号是官方简写形式），作用是实现类名的动态绑定：根据绑定的变量、表达式的返回结果，自动给元素添加或移除对应的CSS类名，整个过程是响应式的，绑定值变化时类名会自动同步更新。
以你给出的代码为例：

<div class="left-side" :class="{'active' : leftSide}">    
   <div class="logo">ULTRANET</div>
</div>

这段绑定的逻辑是：当响应式变量leftSide为真值（布尔值true、非空字符串、非0数值等）时，给当前div添加active类名；当leftSide为假值时，自动移除active类名。

和普通class属性共存的原因 #

两者不会冲突，最终会被框架合并处理，分别承担不同的职责：

• 普通class定义的是静态类名：这类类名不会随页面状态变化，无论逻辑怎么变动都会一直存在于元素上，比如示例里的left-side。
• :class定义的是动态类名：这类类名会随绑定的状态动态增减，比如示例里的active。

框架编译模板时会自动把两类类名合并，最终生成符合原生规范的class属性。比如leftSide为true时，最终渲染到真实DOM上的节点为<div class="left-side active">；leftSide为false时，节点为<div class="left-side">。这种拆分写法不用把固定类名也写到动态绑定逻辑里，代码可读性和维护性更高。

规范兼容性说明 #

:class不属于HTML官方标准规范，浏览器无法原生识别和支持这个属性。
它能正常生效，完全依赖前端框架的编译/运行时处理：框架会在代码构建或页面运行阶段解析:class的绑定规则，监听对应状态的变化，通过原生JS操作DOM的classList接口来实现类名的增删，最终递交给浏览器渲染的始终是符合标准的原生HTML代码。如果没有框架做这层转换，直接把带:class的代码交给浏览器，浏览器只会把它当成无意义的自定义属性，不会执行任何动态类名逻辑。

内容的提问来源于stack exchange，提问作者chris