スイッチでランプを点けよう２【スイッチ】 - 還暦過ぎたエンジニアの挑戦
こんな記事（ディシジョンテーブルのこと ）で前置きが長くなってしまいましたが、 Vue.jsで簡単にブラウザ上の表示をコントロールできることに感激したので第2弾は 「3路スイッチの回路」 イメージです。 材料 スイッチはwebで使えるスイッチ で紹介したマテリアルアイコンを使います。 今回は2か所あります。 画像はランプがOFF状態の時のものとONの状態の時のものをソースの imgBathPath に指定したディレクトリに用意します。 スイッチのon/offで画像を差し替えるので、onの画像とoffの画像は大きさを揃えておくのがポイントです。 ランプがOFFの時の画像 ランプ点灯時の画像 スイッチライン左上 スイッチライン左上 スイッチライン右上 スイッチライン右上 それぞれの画像の名称は何でもよいのですが、 on/offの画像の差し替え用共通メソッド function imageColo
スイッチでランプを点けよう【スイッチ】 - 還暦過ぎたエンジニアの挑戦
前回（というべきか昨日ですが）、 webで使えるスイッチ という記事を書いたのですが、せっかくですので今日はその続き。 そのものずばりで 「スイッチでランプを点けよう」 ということで今日のサンプルはこれです スイッチのアイコンをクリックすると ランプが点いたり消えたりする画像 完全に遊んでいますね。😅 しかしVus.jsおそるべしです。 こんなに簡単にできるとは。。。 ソースはこんな感じ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="sampleMaterial"> <h1>スイッチ2</h1> <sp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
