vue.js 条件分岐後のスタイルの当て方

isLabelがtrueの時は注目という文字を表示してfalseの時は非表示にしています。
画像のようにtrueの時は注目と同じ行に日時を表示したいのすがfalseの時は注目の文字が出ないです。
どうやってスタイルを当てたらいいのでしょうか？

// 現在のコード
 <div>
   <p class="item-title">{{ user.title }}</p>
   <p v-if="isLabel" class="item-label">注目</p>
   <p class="item-createdAt">{{user.createdAt }}</p>
 </div>

下記のようにtrueの時とfalseの時でcreatedAtの位置が違うのでceatedAtにも条件分岐を行いcssを分けたほうがいいのでしょうか？

 <div>
   <p class="item-title">{{ user.title }}</p>
   <p v-if="isLabel" class="item-label">注目</p>
   <p v-if="isLabel"　class="item-createdAt　islabel">{{user.createdAt }}</p>
   <p v-else class="item-createdAt">{{user.createdAt }}</p>
 </div>

maisumakun

2020/04/28 04:38

えっと、「今の状況」と「したいこと」はそれぞれどのようなものでしょうか？

kakedashidesu

2020/04/28 04:46

追記しました！！

退会済みユーザー

2020/04/28 04:50

>isLabelがtrueの時は情報という文字を表示してfalseの時は非表示にしています。「情報という文字」は何を指していますか？このコードでisLabelによって表示非表示になっているのは「注目という文字」です。 >画像のようにtrueの時は注目と同じ行に日時を表示したいのすがfalseの時は注目の文字が出ないです。上に書いているように「注目の文字」はisLabelがfalseの時に非表示になっているので、書いている通り動作している様に思います。 >どうやってスタイルを当てたらいいのでしょうか？スタイルというとCSSを想像するのですが、別の意味でおっしゃっていますか？

kakedashidesu

2020/04/28 04:53

すいません。情報ではなく注目です。修正しました。

kakedashidesu

2020/04/28 04:54

falseの時は出ないのでcreatedAtのcssはどのようにしたらいいかと、 trueの時は注目が表示され同じ行にcreatedAtが表示されます

kakedashidesu

2020/04/28 04:55

trueの時とfalseの時でcreatedAtの位置が違うので別々のcssを当てとほうがいいのかという質問です

kakedashidesu

2020/04/28 04:56

わかりずらくてすいません

maisumakun

2020/04/28 04:56

> falseの時は出ないのでcreatedAtのcssはどのようにしたらいいかと、表示したいようにしてください。回答にも書きましたが、「どう表示したいか」がわからないと、なんとも言えません。

kakedashidesu

2020/04/28 04:57

どう表示したいとはどうゆうことでしょう？画像のように表示したいです

maisumakun

2020/04/28 04:58

えっと、これは「現状こうなっている」という画像ではなかったのですか？

kakedashidesu

2020/04/28 04:59

trueの時は注目と同じ行に日付が表示されてfalseの時は注目が表示されないのでその分、左側に詰めて日付を表示したいです

maisumakun

2020/04/28 04:59

それぞれのスタイルに適用されるCSSはどのようなものですか？

kakedashidesu

2020/04/28 05:02

どのようなもの？？　位置だけ変えたいです

kakedashidesu

2020/04/28 05:02

位置なのでmargin??ですか?

maisumakun

2020/04/28 05:05

> どのようなもの？？元のCSSはどう書いていますか？（CSSなしでクラスを当てても、全く表示は変化しないはずです）

行動規範の内容に同意します

回答3件

LishさんのおっしゃるようにisLabelの結果で動的にclassかstyleをあてるか

別案として

javascript
1<div>
2   <p class="item-title">{{ user.title }}</p>
3   <p class="spacer"><span v-if="isLabel" class="item-label">注目</p>
4   <p class="item-createdAt">{{user.createdAt }}</p>
5 </div>

として、
.spacerに対してwidthをあてたらどうてしょう

投稿2020/04/28 05:11

akkman

総合スコア254

追記から汲み取りましたが、クラスのバインディングでclassを制御したら良いと思います。
https://jp.vuejs.org/v2/guide/class-and-style.html

投稿2020/04/28 04:59

退会済みユーザー

総合スコア0

kakedashidesu

2020/04/28 05:03

よくわかりませんでした

退会済みユーザー

2020/04/28 05:10

データの値によって要素のclassを動的に切り替えることができる機能です。そのclassに合わせてCSSでスタイルを指定すれば希望されている事ができるかと思いました。

退会済みユーザー

2020/04/28 05:34 編集

>trueの時は注目と同じ行に日付が表示されてfalseの時は注目が表示されないのでその分、左側に詰めて日付を表示したいですおそらくkakedashidesuさんの環境では既に何かしらのCSSが当てられていると想像するのですが、上のコードだけだと、こちらではpタグが縦に並ぶブラウザ標準のスタイルしか確認できません。画像からCSSで横並びにしてあると想像しますが、その場合「注目」が非表示になれば自然と左に寄るはずだと思います。と、「想像」するしかない部分があります。 vueの問題なのかCSSの問題なのかも判断できません。回答者側ででkakedashidesuさんが見ているものを再現できるコードを全て提示される等をすれば、期待されている回答がつくかもしれません。

行動規範の内容に同意します