動的クラス名

Question

動的クラス名の生成方法は？

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

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

Answer 1

これは、私を助けを次のようにあなたのidをバインドする必要があります。

Answer 2

私はslim-langに精通していないですが、これはあなたがVueのテンプレートの中に入るために必要なものである：上記の場合

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

、isActiveはtrueに評価された場合は、「アクティブ・クラスの適用されます。そして、 'static-class'は常にビューに適用されます。これは配列構文と呼ばれます。

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

あなたはslim-langプロセッサは、上記のhtmlを発していることを確認する必要があります。

idに設定すると、ヒゲヒコ（{{...}}）の構文を使用して属性バインディングを実行することはできません。

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

参考：https://vuejs.org/guide/syntax.html#Attributes

Answer 3

あなたのコードは実際に動作しますが、問題は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'}, 
     ] 
    } 
    });