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

Question

在 Laravel spark 中，包含渲染表單元素的<div/>可能看起來像這樣

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

</div>

也就是說 --is 有一個:class屬性。 這是什么？ 我得到了意圖/行為——如果form.errors.hash('name')調用返回 true（ form是在封閉組件上設置的SparkForm ），那么 div 將有一個has-error類。 但是，是什么讓:class工作？ 我的第一個假設是它是 Vue.js 的東西，但是如果我閱讀Vue 文檔關於 class 和 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 ://v2.vuejs.org/v2/guide/syntax.html#Shorthands

v-前綴用作標識模板中特定於 Vue 的屬性的視覺提示。 當您使用 Vue.js 將動態行為應用於某些現有標記時，這很有用，但對於某些常用指令可能會感到冗長。 同時，當您構建一個由 Vue.js 管理每個模板的 SPA 時，對v-前綴的需求變得不那么重要了。 因此，Vue.js 為兩個最常用的指令v-bind和v-on提供了特殊的簡寫：

之間沒有區別

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

和

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