webで使えるスイッチ【スイッチ】

今日は新しいカテゴリーを作りました。
題して「これだけ知りたい 部品集」

「知りたい～」 っていうのとはちょっと違うかもしれませんが、
要するにエンジニアとして仕事をする上で
「使いまわしのきくコード」
とか
「共通のデザイン」
とか、もしかすると
「便利なメソッド」
なんかかもしれない。

そんなものを思いついたときに書き溜めていこうと思う。（気合っ！）

初回の今日は題して
「webで使えるスイッチ」

material-iconとVue.jsで作ってみました。

こんな感じでクリックするたびに
on/off が切り替わるイメージですが、
イメージだけではなくて、
それに反応して応用が利くようにしておこうという魂胆です。

骨格はこんな感じ

<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>スイッチ</h1>
    <span id="switch1" class="materials">
        <span class="material-icons">
            <span v-if="switch1On" @click="toOff">toggle_on</span>
            <span v-else @click="toOn">toggle_off</span>
        </span>
    </span>
</div>
<script>
    var switch1 = new Vue({
        el: '#switch1',
        data: {
            switch1On: false
        },
        methods: {
            toOff: function(e) {
                this.switch1On = false;
            },
            toOn: function(e) {
                this.switch1On = true;
            }
        }
    })
</script>

で、例えばスイッチをonにしたときに、
「やぁっ!( ^^) _U~~」
と表示するなら

toOn: function(e) {
    this.switch1On = true;
    alert("やぁっ!( ^^) _U~~"); <= こんな感じで書き足す
}

すると

まあ、そこらへんに転がっていそうな部品ですが、Vue.jsなるものをちょっといじってみたかったので。。。

でも今日はここまでかな
続きはまた。

---