vueを使って、文字数に応じてスタイルを変更するには

Question

vueを使って下記のようなHTMLを出力しています。
ここで、字数が一定文字数以上のときは、サイズを小さくするという処理をしたいと思っています。
たとえば　１０文字以上のときは、fontsizeを80%にする、といった処理です。

    <tr v-for="rec in records">
                <td>{{rec.a}}</td>
                <td>{{rec.b}}</td>
                <td>{{rec.c}}</td>
    </tr>

vueの機能を活用するとすれば、どのようにすればよいのでしょうか。
ご指導お願いいたします。

Answer 1

v-class か v-style 属性を使えば良いですよ。

<td v-class="rec.a.length < 10 ? [] : ['small']">{{rec.a}}</td>

Comments

[退会済みユーザー]

ありがとうございます！　調べたところv-bind:class のようでした。

[yhg]

あ、そうでしたね。普段省略記法(:class)ばかり使っている弊害が…

Answer 2

いただいた回答をもとに調べ、以下の方法でできました。
現在のバージョンではv-classではなく、v-bind:classとするようです。

<td v-bind:class="{small:rec.title.length>10}">