コリラボ

技術の学びの備忘録

Vue.js

v-forで指定回数繰り返す。

v-forで指定回数繰り返す。

実装したい事

v-forを10回繰り返すなど、指定回数繰り返すスクリプトを書きたい。 とりあえず、手始めに1から10まで表示するスクリプトを書く

動くサンプルはこちら

動くサンプルはこちら

Html側の書き方

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
    <div id="app">
        <span v-for="n in 10">{{ n }} </span>
    </div>
</body>

スクリプト側の書き方

<script>
    var example = new Vue({
        el: '#app',
    })
</script>

ハマったポイント

Vueインスタンスを作らないとJs動かない。

完成形

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
    <div id="app">
        <span v-for="n in 10">{{ n }} </span>
    </div>
</body>
<script>
    var example = new Vue({
        el: '#app',
    })
</script>
</html>