コリラボ

技術の学びの備忘録

Vue.js

Vue.js文字列を逆転させる

Vue.js文字列を逆転させる 今回は文字列を逆転させるスクリプトを書いてみたいと思います。 動くサンプル 動くサンプルはこちら HTML側はこう書いた <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> ハマったところ 特になし スクリプト側はこう書いた <script> var app = new Vue(…

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…

setIntervalを使ってカウントダウンを作る

setIntervalを使ってカウントダウンを作る 作りたいもの 30秒経過したらアラートが表示されるシンプルなタイマー?(と呼べるかわからないもの) 動くサンプル 動くサンプルはこちら HTML <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <section id="app"> <div> <div> <h2>{{title}}</h2> <div> <span>{{ time }}</span> {{timer}} </div> </div></div></section></body>

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> スクリプ…

v-forで入れ子の情報を表示する

v-forで入れ子の情報を表示する v-forを2つ使ってリスト表示をしてみたいと思います。 マクドナルド ハンバーガー チーズバーガー モスバーガー モスバーガー モスチーズバーガー 動くサンプルはこちら 動くサンプルはこちら Html側の書き方 <div id="app"> <div v-for="store in stores" :key=store.index> <h2> {{store.name</h2></div></div>…

v-forで都道府県を表示する

v-forで都道府県表示を行う v-forは、Phpのforeach構文みたいに何度も同じ処理を繰り返す処理で、リスト表示などによく使う表現です。 まとめサイトを作るとき必ずお世話になる?都道府県リストを今回は作ってみたいと思います。 動くサンプルはこちら 動く…

v-elseでさらに条件分岐

v-elseでさらに条件分岐 v-ifで条件を分岐させることができた。がやりたいことが出てきた。 falseの場合はなんか表示したい。 もう一度ボタンを押したらtrueに戻したい。 ということで実装だ。 Html側 <div id="app"> <span v-if="seen">seen is true</span> <span v-else>seen is false</span> <button @click="change">押す</button> </div> <span v-else>seen is false</span>を追…