1つの要素を強調表示する適切な方法は何ですか？

Question

vue.jsでr.data2に赤色で表示したいのですが、それをデバッグするヒントが正しく動作しませんか？

データ '行'は、1秒あたりのタイマーによって更新されます。 'Status'、 'data1'、 'data2'はサーバー側で生成されます。

vm = new Vue({ 
    el: '#app', 
    data: { 
     rows: [{Status:1, data1:"d1", data2:"d2"}] 
    } 
    }) 
    ... 
    <tr v-for="r in rows">               
    <td><button class="st-{{r.Status}}">r.data1</button></td> 
    <td valign="top">                
     <div v-if="r.Status == 4">             
     <font color="red">{{r.data2}}</font>       
     </div>                  
     <div v-else>                 
     {{r.data2}}             
     </div>                  
    </td>                   
    </tr> 

Answer 1

Vueのドキュメントに与えられたとして、あなたは、クラスとスタイルのバインディングを試してみましたか？

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

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 

し、データ：

data: { 
    activeColor: 'red', 
    fontSize: 30 
} 

の例では、コピー＆ペーストであることをドキュメントからは、上記のリンク。見てみな！次のように最善の方法は、クラスのバインディングのための配列構文を使用することです

：

<div v-bind:class="['some-static-class-for-your-data', { 'danger-class' : data2 == 4 }]"> 
    my data2 value = {{data2}} 
</div> 

などCSSを設定します。

.danger-class { 
    color: red; 
} 

はコメント＃1の後に答えを編集します

data2の値が4になると、divに「危険クラス」が設定されます。あなたのCSSは、それが赤で表示されることを保証します。

あなたのデータのために他のクラスを持っている場合は、上記の例のように、あなたはそれではなく、ハードコーディングスタイルの意味のあるクラス名を設定することをお勧めしsome-static-class

でそれを置くことができます。だから、もしあなたが望むなら、あなたはそれを行うことができますが、私はあなたにスタイルバインディングのために行くことをお勧めしません。ドキュメントリンクでクラスとスタイルのバインディングを確認してください。