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 の日の背景を グレーにする場合とか。
Author And Source
この問題について(vue.js と 複雑なcss), 我々は、より多くの情報をここで見つけました https://qiita.com/ma7ma7pipipi/items/6ce391f89d686b29eb7a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .