Vue.js 条件がfalseの時にスタイルを変更したい

Question

messageIsShowがfalseの時はisShowのスタイルのcolorを緑色にしてあげたいです。
どう書いたらいいのでしょうか？
わかる人がいましたら教えて欲しいです。

<template>
  <div class="message">
    <p class="message_isShow">メッセージ</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class ApplyMessage extends Vue {
  @Prop({ type: Boolean, default: true }) messageIsShow: Boolean
}

</script>

<style lang="scss" scoped>
.message {
  background: #ffffff;
  flex: none;
  &_isShow {
    color: red;
  }
}

Comments

[退会済みユーザー]

同じ質問では？
https://teratail.com/questions/257100

[kakedashidesu]

解決していなくわからないのでもう一度投稿しました

[退会済みユーザー]

そういう場合は過去の質問を編集してください。「アクティブ」タブに表示されます。
過去の質問を放置して同じ質問を投稿することは推奨されません。

Answer 1

一部書き換えていますがこんな感じでどうですか？
:classですが、messageIsShowの値によって付与するclass名を分岐させています。
そうすれば予めstyleに定義してある色に変更は可能かと思います。
(messageIsShowの値をtrue, false書き換えてみて下さい)

<template>
  <div class="message">
    <p :class="fontColor(messageIsShow)">メッセージ</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      messageIsShow: Boolean = false,
      classGreen: 'messageGreen',
      classRed: 'messageRed',
    }
  },
  methods: {
        fontColor: function(messageIsShow) {
            if (messageIsShow) {
                return this.classRed;
            } else {
                return this.classGreen;
            }
        }
    }
}
</script>

<style lang="scss">
.message {
  background: #ffffff;
  flex: none;
  &_isShow {
    color: red;
  }
}

.messageRed {
  color: red;
}

.messageGreen {
  color: green;
}
</style>

参考

Vue.jsで条件によって:classの値を変える - Qiita

Comments

[kakedashidesu]

ありがとうございます！
return {
messageIsShow: Boolean = false,
classGreen: 'messageGreen',
classRed: 'messageRed',
}
},
上記なのですが
@Component
export default class ApplyMessage extends Vue {
@Prop({ type: Boolean, default: true }) messageIsShow: Boolean
}で書くとどういう風にすればいいのでしょうか？

[eneko0513]

わたしの環境ではtsを使ってなかったので動作確認はできません・・。
既に書かれているbooelanのmessageIsShowと同じような書き方でいけませんか？
classGreenとclassRed自体は文字列なのでtypescriptの作法に乗っ取る形で。

({ type: string, default: 'messageGreen' }) classGreen: string
とかでしょうか。
※動作確認していません。