Laravel Spark/Vue.js 中的 :class 属性是什么

Question

在 Laravel spark 中，包含渲染表单元素的 <div/> 可能如下所示

<div class="form-group" :class="{'has-error': form.errors.has('name')}">

</div>

也就是说 -- 有一个:class 属性。这是什么？我得到了意图/行为——如果form.errors.hash('name') 调用返回true（form 是在封闭组件上设置的SparkForm），那么 div 将有一个has-error 类。但是，是什么让:class 起作用？我的第一个假设是它是一个 Vue.js 的东西，但如果我阅读 the Vue docs on class and style bindings，它（看起来像？）Vue.js 需要一个名为 v-bind:class 的属性

<div class="form-group" v-bind:class="{'has-error': form.errors.has('name')}">

</div>

那么是什么让:class 工作？这是 Vue.js 提供的捷径吗？ （如果是这样，它是否记录在某处？）。

这是一些获得专利的 Laravel 语法糖，可以让编写模板不那么冗长吗？如果是这样，这是在哪里实现的？

这是第三件事吗？

Answer 1

那么是什么让 :class 起作用？这是 Vue.js 提供的捷径吗？ （如果 那么，它是否记录在某处？）。

是的，它是 Vuejs 简写

文档：https://vuejs.org/v2/guide/syntax.html#Shorthands

v- 前缀用作识别特定于 Vue 的视觉提示 模板中的属性。这在您使用 Vue.js 时很有用 将动态行为应用于某些现有标记，但可以感觉到 一些常用指令的详细说明。同时， 当您构建一个 v- 前缀时 Vue.js 管理每个模板的 SPA。因此，Vue.js 提供 两个最常用指令的特殊简写，v-bind 和v-on：

没有区别

:class="{'has-error': form.errors.has('name')}

和

v-bind:class="{'has-error': form.errors.has('name')}