Vue.js

Vue.jsを使ってシャッフルをリストを作る方法

HTML <div id="app">
<button v-on:click="shuffle">シャッフル</button>
<transition-group name="flip-list" tag="ul">
<li v-for="pref in prefs" v-bind:key="pref.name">
{{ pref.name}}
</li>
</ul>
</div>

JavaScript var app = new Vue({
el: "#app",
data:{
prefs:[
{name: '北海道'},
{name: '青森県'},
{name: '岩手県'},
{name: '秋田県'},
{name: '山形県'},
{name: '福島県'},
]
},
methods: {
shuffle: function(){
// lodashというライブラリを使用
this.prefs = _.shuffle(this.prefs);
}
}
});

lodashというライブラリの使用は下記のように書き込んで取り込んでいます。| The use of the library called lodash is imported by writing as follows.

＜script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"＞＜/script＞

こちらが今回勉強させてもらった、ともすたさんの動画です。

この本を参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

もっと深く学びたい人にはこちらもどうぞ。| For those who want to learn more deeply, this is also recommended.

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー