v-for 文字の色変更

v-forを使って文字を出力して、その文字の色をそれぞれ違う色で表示したいと思っています。
現在のコードだと全てが同じ色になってしまっています。
個人的な考えではv-bind:classに引数を入れたりできたら、それぞれに対してのv-bind:classが作成できそうかなとは思っているのですが、
そもそもの考えかたが違うのか、どうしたらいいのかがわからなかったので質問させていただきました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/test.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <ul id="example-1">
    <div v-for="value in words" v-bind:class="color">
      {{ value }}
    </div>
  </ul>
  <script type="text/javascript" src="../js/test.js"></script>
</body>
</html>

var example1 = new Vue({
  el: '#example-1',
  data: {
    words:
      { message1: "あいうえお", message2:"かきくけこ", message3:"さしすせそ", message4:"たちつてと"}, 
    color:"color_red"
  },
})

.color_red{
  color:red;
}
.color_blue{
  color:blue;
}
.color_green{
  color:green;
}

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

回答1件

ベストアンサー

色の情報もwordsに持たせてあげましょう。

js
1words: [{message: "あいうえお", color: "color_red"}, {message: "かきくけこ", color: "color_blue"}, {message: "さしすせそ", color: "color_green"}]

上記のようにすれば

html
1<div v-for="word in words" v-bind:class="word.color">
2  {{ word.message }}
3</div>

で色変えまで可能です。

投稿2022/06/17 04:15

airRnot

総合スコア165

bskbbbggg

2022/06/17 04:37

回答ありがとうございます。 wordの中に色の情報をいれる発想なかったです。参考になりました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する