vue.js と 複雑なcss


tdの中身を 値に応じて変更したい。
しかし、複雑。

hoge.vue

<style>

    *[data-content="cont-0"] {
        background-color: #f7f9f9 !important;
    }


</style>

---略


<td v-for="(s,key2) in calendar[weekCount][key]" style="border-left: 1px solid #e1e1e2;cursor: pointer;" :data-content="`cont-${s}`">
    <span v-if="s == 1" @click="addYoyaku(key,key2,s,weekCount)">
        <i class="fas fa-bullseye" style="color:#f154a2;"></i>
    </span>
    <span v-else>
        <i class="fas fa-times" style="color: #d7d7d7;"></i>
    </span>
</td>

こんな感じで

hoge.vue

:data-content="`cont-${s}`"

を利用して複雑なcssを使うことも可能。
例えば、カレンダーの X の日の背景を グレーにする場合とか。