動的クラス名

Question

動的クラス名を生成する方法は？

  li v-for='obj in objs'
    | {{ obj.id }} {{ obj.title }}
    div id="obj-{{ obj.id }} " style="float:right; color:red;"

このサンプルは機能しません！ divを後で更新するには、このクラス名が必要です!!!

Answer 1

これは私を助けました。

    div :class="['obj-' + obj.id]" style="float:right; color:red;"

Answer 2

私はslim-langに精通していませんが、これはVueテンプレート内で取得する必要があるものです：

<div v-bind:class="['static-class', { 'active-class' : isActive }]">...</div>

上記の場合、isActiveがtrueと評価されると、 'active-class'が適用されます。また、「静的クラス」は常にビューに適用されます。これは配列構文と呼ばれます。

参照： https://vuejs.org/guide/class-and-style.html#Array-Syntax

slim-langプロセッサが上記のhtmlを発行することを確認する必要があります。

idの設定に移ると、口ひげ（{{...}}）構文を使用して属性バインディングを行うことはできません。次のようにidをバインドする必要があります。

<div v-bind:id="dynamicId"></div>

リファレンス： https://vuejs.org/guide/syntax.html#Attributes

Answer 3

複数のクラスの場合：

:class="{'form-control':true,['box_'+index]:true}"

Answer 4

あなたのコードは実際に動作します。問題はvueデータ設定です。私もスリムが大好きです。

div#posting
  li v-for='obj in objs'
    | {{ obj.id }} {{ obj.title }}
    div id="obj-{{ obj.id }}" class="obj-{{ obj.id }} " style="float:right; color:red;"

javascript:
  var posting;
  posting = new Vue({
    el: '#posting',
    data: {
      objs:
        [
          {id: 1, title: 'xx'},
          {id: 2, title: 'yy'},
        ]
    }
  });