Vue.js

Question

我可能会陷入困境 - 尝试在 IE11 和 Vue.js

中创建 css-grid

我有一个这样的 LI:

  <li :class="{getClass}">
  </li>

getClass 是一个计算方法：

getClass: function () {
  return "Row" + this.getMSRow() + "Column" + this.getMSColumn();
},

在样式表中我有 def。在所有 class 中：

.Row1Column1 {
   -ms-grid-column: 1;
   -ms-grid-row: 1;
   grid-column: 1;
   grid-row: 1;
}

这实际上在 IE11 中工作得很好。

我的问题是我需要向同一个 LI 添加 2 个以上的条件 classes。

 :class="{
  getClass,
  'calendar-day--not-current': !day.isCurrentMonth,
  'calendar-day--today': isToday,
}"

这不起作用 - 它使 'getClass' 成为 class - 而不是计算方法的结果。我认为这只是一些简单语法的问题...，但我没有想法。

在此先感谢您的帮助。

Answer 1

这是解决方案

: class="[
    getClass,
    { 'calendar-day--not-current': !day.isCurrentMonth },
    { 'calendar-day--today': isToday },
]"

如果你也想要静态 class。

: class="[
    'static-class',
    getClass,
    { 'calendar-day--not-current': !day.isCurrentMonth },
    { 'calendar-day--today': isToday },
]"

Answer 2

我想您需要定义一个计算的 class 对象，以便直接在 :class 绑定中使用它：

<li :class="liClass">
</li>
...

computed: {
   liClass () {
     return {
      [this.getClass]: true,
      'calendar-day--not-current': !this.day.isCurrentMonth,
      'calendar-day--today': this.isToday,
     }
   }
}

Vue.js - Div - 使用计算的字符串结果作为 class 名称

Vue.js - Div - use string result from computed as class name

javascript

css

internet-explorer-11