vueで開いたり閉じたりするコンポーネントを作る
最近vanillaのjavascriptで開いたり閉じたりするUIを作ってて、すっげぇ苦労したので、 「くっ…!!(vueなら簡単に書けるのに…!!)」という気持ちを発散するために、実際に作ってみた。
仕様
開くボタン
- 「開く」ボタンをクリックするとフォームが開く。
- 開いている間は開くボタンは消える。
閉じるボタン
- フォームには「閉じる」ボタンがあり、押すとフォームが閉じる。
- 閉じている間は閉じるボタンは消える。
作ったもの
See the Pen Vue expand form by clash_m45 (@clash_m45) on CodePen.
コード
styleをはしょってるので、全文はcodepenのほう見てください。
単純に v-if
を使って、プロパティ expand がtrueのとき開く、としているだけ。
buttonのon-clickで openメソッド、closeメソッドを呼んで、
expandを書き換えると、vueの力でbindingされて、動的にUIが変化する!
素晴らしい!
<template> <div> <h3>開いたり閉じたりする入力フォーム</h3> <hr> <button v-if="!expand" @click="open">開く</button> <div v-if="expand"> <label for="hamburger">Do you like hamburger?</label> <input type="checkbox" name="hamburger" id="hamburger"> <span>checked</span> <br> <button @click="close">閉じる</button> </div> </div> </template> <script> export default { name: "count", data () { return { expand: false } }, methods: { open: function() { this.expand = true }, close: function() { this.expand = false } } } </script>