【Vue.js】④[v-for]でリスト形式の表示をお願いする（Vue.jsから始めるJavaScriptフレームワーク）

[v-for]でリスト形式の表示をする。

【Vue.js】の便利な機能として、【v-for】でHTML部分ノータッチで描写してくれるすごい機能があります。

DOM操作よさようなら。

なにはともあれ、まず表示。

「追加」をクリックすると、どんどんリストが作成されます。

今回はこちらを触っていきます。

【HTML部分】

<div id="app">
    <input v-model="netaName" /><button @click="addItem">追加</button>
    <ol id="itemList">
        <li v-for="item in shari">{{ item }}</li>
    </ol>
</div>

JavaScript部分

<script>
var netas   = ['いくら', '大トロ', 'キングサーモン', 'キャビア', 'ウニ', 'あわび', 'アボカド', 'とびっこ', '白子', '軍艦'];
var random  = 0;
new Vue({
    el: "#app",
    data: {
        shari: [],
        netaName: "いくら"
    },
    methods: {
        addItem() {
            //ランダム整数作成
            var random = Math.floor(Math.random() * netas.length)
            //生成
            this.shari.push(this.netaName)
            //次のためにテキストボックスに文字を落とす
            this.netaName = netas[random]
        }
    }
})
</script>

これの作り方

①ボタンを作成

    <input v-model="netaName" /><button @click="addItem">追加</button>

とりあえず、「methods」内で動作するための【v-on】のボタンを作成

（【v-on】は【@】に省略可能）

②【v-for】

    <ol id="itemList">
        <li v-for="item in shari">{{ item }}</li>
    </ol>

【v-for】内で反復描写するために、

「★{{ HTML部分のマスタッシュ }}★ in ★JavaScriptの配列★」の形式を使用。

③【Vue.js】の定型を使用

new Vue({
    el: "#app",
    data: {
        //宣言とか初期化とかする。
    },
    methods: {
        addItem() {
            //やりたいことをかく。
        }
    }
})

JavaScript部分では、上記定型を使用して書き込んでいく。

④data:内

    data: {
        shari: [],
        netaName: "いくら"
    },

とりあえず、使用する変数を宣言する。

shari：[],

HTMLに表示したい配列

netaName: “いくら”

初期値を持たせる（初期値にランダム持たせるアイデアがぱっと出ないのは、純粋な力不足による。）

こちらでOK。

②<li>タグ内で【v-for】を使用することによって、反復処理を行ってくれます。

サーバーサイドスクリプトでfor文で囲って同じようなものを作ったりしますよね。

この作業を再読み込みしなくても【Vue.js】は動的に処理してくれると勝手に理解。

⑤methods: 内

    methods: {
        addItem() {
            //ランダム整数作成
            var random = Math.floor(Math.random() * netas.length)
            //生成
            this.shari.push(this.netaName)
            //次のためにテキストボックスに文字を落とす
            this.netaName = netas[random]
        }
    }

methods内では、やりたいことの処理をかく。

①で作成したHTMLの【v-on】で呼び出すファンクションを作成。

ランダム整数を作成して（ここの記述は、【Vue.js】の本質的な処理でないので無視してください。）

「shari（④で宣言した配列）」にpushして配列にボンボン追加。

最後の行は、テキストボックスに次のテキストを反映させるだけの処理。（これも【Vue.js】の本質的な処理でないので無視してください。）

以上です。

v-forで、HTMLにリストを続々と追加していく作業で知っておくべきことは、

「★{{ HTML部分のマスタッシュ }}★ in ★JavaScriptの配列★」の形式を使用する。

ということです。

「意味ﾜｶﾝﾈ」となっても、作ってみればわかると思います。