配列内にあるオブジェクトを取り出して、スタイル要素に適用する。

やること

配列の中にあるオブジェクトの色要素を取り出して、表示させる文字の色にオブジェクトの色要素を割り当てるプログラムです。

ソースコード

全体のソースコードは以下の通りになります。（headタグやvueの読み込み箇所は省きます。）

HTMLファイルのソースコード

        <div id="app">
            <ul>
                <li v-for="(addColor,index) in colors">
                    <span :style="colors[index]">
                        {{addColor.color}}
                    </span>
                </li>
            </ul>
        </div>

jsファイルのソースコード

var app = new Vue({
    el: "#app",
    data: {
        colors: [
            {
                color: "red",
            },
            {
                color: "blue",
            },
            {
                color: "green",
            },
        ],
    },
});

ソースコードの解説

コードを書く順番で見ていきます。

色データの作成

data: {
        colors: [
            {
                color: "red",
            },
            {
                color: "blue",
            },
            {
                color: "green",
            },
        ],
    },

配列の中に３つのオブジェクトがある状態です。
具体的に説明するとdataの中にcolorsという名前の配列があり、その配列の中のオブジェクトにcolorというキーの名前と文字列が入っています。

配列の中身を一つずつ取り出して、表示させている。（反復処理、リストレンダリング）

<!-- (オブジェクト,インデックス番号) -->
<li v-for="(addColor,index) in colors">
～
</li>

colors配列の中から、オブジェクトとインデックス番号を引数として取り出しています。

オブジェクト内にある文字列を取り出して、スタイルで色を割り当てる。

<span :style="colors[index]">
    {{addColor.color}} <!-- オブジェクト内になる文字列を表示 -->
</span>

vueでstyle属性の操作を行うため、v-bindをつけます。
そのstyle属性の中で、配列の中身をインデックス番号で指定することによって、指定した先にあるオブジェクトを取り出しています。その結果、表示させている文字色に合わせて色のスタイルが割り当てらるようになります。

最後に

基礎のv-ifやv-forだけでも、簡単なことから複雑なことまでたくさんのことができるので、これからどんどん挑戦していきたいと思います。

最後まで読んでいただきありがとうございました。
この記事が少しでもあなたのお役に立てば幸いです。