在 Vue.js 和 Slim 中将类绑定到数据对象属性答案

【问题标题】：Bind class to data object property in Vue.js and Slim在 Vue.js 和 Slim 中将类绑定到数据对象属性
【发布时间】：2018-10-02 14:17:41
【问题描述】：

我有以下slim 模板：

.dc-credit-card-label 'v-bind:class' => "{MyClass}"
  span.dc-credit-card--stars ••••
  span.dc-credit-card--stars ••••
  span.dc-credit-card--stars ••••
  span
    | {{ payment.last4 }}

所以我试图设置 MyClass = 'some-cool-class' 但这不起作用

有没有机会这样做？

【问题讨论】：

不是 100% 确定语法，但请尝试，'v-bind:class' => "{MyClass: true}"
这个问题是关于 Ruby 的 Sim 模板引擎吗？

标签： vue.js slim-lang

【解决方案1】：

来自this git issue的评论：

您只需像平常一样使用指令标签，但要使它们的语法更简洁。

.signed-in v-if="user"
  = "Wecome, {{ user.name }}"
  a.sign-out-button v-on:click="signOut" Sign out

所以，“正常”使用它：

.dc-credit-card-label :class="{MyClass}"
  span.dc-credit-card--stars ••••
  span.dc-credit-card--stars ••••
  span.dc-credit-card--stars ••••
  span
    | {{ payment.last4 }}

【讨论】：