Vue.jsサンプルコード（37）一定時間経過後に自動でリダイレクトする｜TechRacho by BPS株式会社
前記事: 36. Deleteキーで前のフィールドに戻って消す 次記事: 38. 入力をやめるとリダイレクトする 37. 一定時間経過後に自動でリダイレクトする Vue.jsバージョン: 2.5.2 30カウントすると直前のページに自動でリダイレクトします。 以下のJSFiddle埋め込みはフレーム内のみリダイレクトします。 ブラウザによってはこのページの直前のページにリダイレクトする可能性もあります。 画面をリロードすると最初に戻ります。 ポイント createdは、new Vue のあとで1回呼ばれます。 const vm = new Vue({ el: "#app", data: {a: 30}, created: function() { setInterval(() => { this.a-- }, 1000) }, watch: { a: function(v) { if (v
Vue.jsサンプルコード（30）パスワードを自動生成する｜TechRacho by BPS株式会社
前記事: 29. フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える 次記事: 31. パスワードの強度をバーで表現する 30. パスワードを自動生成する Vue.jsバージョン: 2.5.2 [パスワード生成]ボタンを押すと[パスワード]フィールドにパスワードが生成されます。 パスワードは隠していません。 画面をリロードすると最初の状態に戻ります。 ポイント Vue.jsのコード側では単に変数aを更新しているだけです。 const vm = new Vue({ el: "#app", data: {a: ""}, methods: { g: function() { this.a = Math.floor(Math.random() * 100000000000000000).toString(36) }, }, }) 前記事: 29. フィールドごとに全角英数字入力と半角
Vue.jsサンプルコード（29）フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える｜TechRacho by BPS株式会社
前記事: 28. 文字の大きさをボタンで変更する 次記事: 30. パスワードを自動生成する 29. フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える Vue.jsバージョン: 2.5.2 [全角]フィールドに入力する英数字は全角に、[半角]フィールドに入力する英数字は半角になります。 日本語入力には影響しません。 画面をリロードすると最初の状態に戻ります。 ポイント watchで変数の変更を監視しています。watchの内部で変数をさらに変更しても無限ループになりません。 const vm = new Vue({ el: "#app", data: {a: "", b: ""}, watch: { a: function(v) { this.a = v.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharC
クリスマスだしcanvasで雪を降らせるJS書いてみた｜TechRacho by BPS株式会社
こんにちは、デザイナーのスギヤマです。 今日は、クリスマスイブですね。 個人的にクリスマスは静かに雪が降っていて、綺麗と言ったイメージがあります。 なので気分だけでもそんな雰囲気を味わうべく、色々参考にしながらcanvasの勉強を兼ねて雪を振らせるJSを書いてみました。 以下で簡単説明していきます。 サンプルコード サンプルおよび記事トップ写真 : 東京駅丸の内正面通りからの夜景 色々準備する canvasを使うための準備をしていきます。 今回はブラウザーのウィンドウにフィットする様に表示させる方向で進めます。 canvasの表示領域は、設定しないと可変にならないようなので、 リサイズイベントを検知してcanvasのサイズを変えるよう指定します。 snow.js /*------------------------ canvas要素の取得と設定 ----------------------
Vue.jsサンプルコード（21）[はい][いいえ]ボタンを押すと表示を変える｜TechRacho by BPS株式会社
前記事: 20. スター[★★★☆☆]をクリックして数値を1桁だけ入力する 次記事: 22. YouTube風の[👆][👇]ボタンで1度だけGood/Bad評価する 21. [はい][いいえ]ボタンを押すと表示を変える Vue.jsバージョン: 2.5.2 [はい]または[いいえ]ボタンを押すと「ありがとうございました！」に変わります。 画面をリロードすると最初の状態に戻ります。 ポイント: HTMLコード中のdata-vはHTML 5のカスタムデータ属性です。 <div @click="a" data-v="yes"> はい </div> <div @click="a" data-v="no"> いいえ </div> カスタムデータ属性は、JavaScriptのHTMLElement.datasetでリードオンリーで読み取れます。 this.answer = e.target.dat
Vue.jsサンプルコード（15）パスワードのマスクを解除する
前記事: 14.「承認」ボタンを押したら解除できないようにする 次記事: 16. 入力中だけパスワードを表示する 15. パスワードのマスクを解除する Vue.jsバージョン: 2.5.2 チェックボックスをオンにするとパスワードのマスクが解除され、パスワードが読めるようになります。 const vm = new Vue({ el: "#app", data: {p: "secret-password", t: "password"}, }) ポイント: この方法の代わりにHTMLの<input>タグでtypeを切り替えると、Vueの警告が表示されます。 前記事: 14.「承認」ボタンを押したら解除できないようにする 次記事: 16. 入力中だけパスワードを表示する バックナンバー（Vue.jsサンプルコード） Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法
Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする｜TechRacho by BPS株式会社
前記事: 07. 入力文字数をリアルタイムにプレビューする 次記事: 09. カラーピッカーで選択した色を動的に表示する 08. 入力したカラーコードをリアルタイムでプレビューする はなはだ簡単ですが、これも双方向データバインディングの例です。 Vue.jsバージョン: 2.5.2 6桁または3桁の16進カラーコードを入力すると、その場で下の色が更新されます。 :styleや:classには「魔法」が効く 今回のはシンプルですが、ポイントはHTMLの:style="{color: a}の部分です。 <div class="help-block" :style="{color: a}"> これはv-bindの略記法です（実はこれまでのサンプルコードにも登場しています）。普通のHTML属性と異なるのは、属性名が:で始まっていることです。 <!-- 属性を束縛 --> <img v-bind:s
Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする｜TechRacho by BPS株式会社
引き続きVue.jsの双方向データバインディングのサンプルです。 Vue.jsバージョン: 2.5.2 「タイトル」に入力するとすぐ下にリアルタイムで表示され、「本文」に入力すると表示に加えて文字数もリアルタイムで表示されます。 文字数は全角文字も1文字として数えられます。 冒頭と末尾のスペースはカウントされません。途中のスペースはカウントされます。 前回はHTMLで{{ sum + tax }}と書きましたが、今回のように{{140 - b.length}}というもう少し複雑な書き方も可能です。表示にしか使わない式をこのように書けるのはありがたいことです。 <div class='panel-footer'>あと {{140 - b.length}} 文字 </div> テンプレート構文の制約 Vue.jsのHTMLテンプレート構文{{ }}内に書けるのは単一の式のみに制限されています（
Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる｜TechRacho by BPS株式会社
前記事: 04. 双方向データバインディングを使ってみる 次記事: 06. 合計金額をリアルタイムに表示する 05. 複数のinputに同じ変数を割り当てるとどうなる？ これも双方向データバインディングのサンプルコードです。今回はBootstrapのCSSとJSもCDNから追加して見た目を向上させています。 Vue.jsバージョン: 2.5.2 動作 HTMLソースで、以下のようにv-model='a'属性をさまざまなinputに追加することで同じ変数aを共用しています。以下はサンプルコードのHTMLを読みやすく省略・整形したものです。 <input type='text' v-model='a'> <label><input type='radio' v-model='a' value='1'>壱</label> <label><input type='radio' v-model='a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
