【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の配列★」の形式を使用する。

ということです。

「意味ワカンネ」となっても、作ってみればわかると思います。

 

得た知識

v-forの【item in shari】って何なの?

どちらも勝手に命名しただけです。

「○○ in ○○」の仕組みを使用することによってJavaScriptの配列をHTML部分にどんどん追加していける。

言い換えると

「★{{ HTML部分のマスタッシュ }}★ in ★JavaScriptの配列★」の形式にすることによって、配列の内容をHTMLに書き出すことができる。

しかもタグとか考慮せずに勝手によろしく描写してくれる。

item:{{}}(マスタッシュ)で命名したHTML部分。

shari:【JavaScript】部分で配列として宣言したもの。

 

【v-model】

表示するテキストボックスなどと同期します。

【v-model】はModelとView(HTML部分)を同期しますので、テキストボックスに入力した内容をそのまま反映してくれます。