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

Question

在 Laravel spark 中，<div/> 包含呈现的表单元素可能看起来像这样

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

</div>

也就是说 -- 具有 :class 属性。这是什么？我得到 intent/behavior——如果 form.errors.hash('name') 调用 returns 为真（form 是在封闭组件上设置的 SparkForm），那么 div 将有一个 has-error class。但是，是什么让 :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

So what makes :class work? Is this a Vue.js provided short cut? (if so, is it documented somewhere?).

是的，它是一个 Vuejs Shorthand

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

The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the v- prefix becomes less important when you are building an SPA where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on:

没有区别

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

和

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