1

在 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 的东西，但是如果我阅读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 语法糖，可以让编写模板不那么冗长吗？如果是这样，这是在哪里实现的？

这是第三件事吗？

4

1 回答 1

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')}
于 2017-06-25T18:43:51.490 回答