コリラボ

技術の学びの備忘録

Vue.js

v-for配列をランダムに表示する

やりたい事

v-forで111111とか表示するのではなく、 2345123のようにランダムに表示したい。

動くサンプル

動くサンプルはこちら

htmlの方

<div id="app">
    <span v-for="n in 5" >{{random()}}</span>
</div>

ハマったところ

特になし

scriptの方

<script>
    new Vue({
        el: '#app',
        data: {
            ary: ['1','2','3','4','5','6']
        },
        methods:{
            'random': function(){
                const rnd = Math.floor(Math.random() * this.ary.length);
                return this.ary[rnd];
            }
        }
    })
</script>

ハマったところ

全部ハマった。 const よくJavascriptvarで変数宣言されるけどその仲間つまりconst rndはrndという変数を定義するということになるだろう。 Math.floor(Math.random() * this.ary.length); Math.floor()小数点以下を切り捨てます。ex:3.5->3 Math.random()0以上1未満の疑似ランダムな浮動小数点数 this.ary.lengthDataのaryの要素数 return this ary[rnd];Data aryの[rnd]番目の要素を返す。

完成形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <span v-for="n in 5" >{{random()}}</span>
    {{c}}
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            ary: ['1','2','3','4','5','6'],
            c:0,
        },
        methods:{
            'random': function(){
                const rnd = Math.floor(Math.random() * this.ary.length);
                return this.ary[rnd];
            }
        }
    })
</script>
</body>
</html>