モーダル(2)Vue.jsを使ってレスポンシブ対応かつ切替可能なモーダルを作成する今回はVue.jsを使って切り替えが可能なモーダルウィンドウを作成していきたいと思います!デモページを用意したのでご覧ください。今回はVue.jsの公式サイトで紹介されている「モーダルコンポーネントの例」を参考に、自己流にアレンジしてみました。Vue.jshttps://jp.vuejs.org/v2/examples/modal.htmlまた、弊社のブログでも過去にJQueryを使った作成方法を紹介しています。JQueryを使って作成したものと比べていただくと、JQueryとVue.jsの比較にもなるかと思います!jQueryでレスポンシブ対応かつ切替可能なモーダルを作成する方法https://www.tipdip.jp/tips_posts/production/2090/それでは早速、Vue.jsを使って作成していきたいと思います。HTMLとJSを記述するまずはHTMLを記述していきたいと思います。head内でVue.jsを読み込んでいきましょう。<p>モーダルウィンドウが開きました。郊外のぎらぎらひかる草の波。この様に表示することができます。</body>こんな感じです。長いですが、おおまかに『モーダルを開くボタンの部分』、『モーダルの中身』、『モーダルの中身のテンプレート』の3つに分かれています。})『#modal-template』をコンポーネント登録し、モーダル部分のテンプレートとして使用しています。モーダルの開閉や、どのモーダルを表示するかは『showModal』の値で制御しています。開閉時のアニメーションは『<transition>』と『CSS』で行っています。CSSを記述する参考までに、今回のデモで使用したCSSを記述します。}こんな感じです!まとめいかがでしたでしょうか?以前作成したJQueryのものと比べてもらうと、かなりシンプルな記述になっているのを確認いただけたのではないでしょうか。アニメーションをつける場合にVue.jsの方が簡単なので、そこに大きくメリットを感じる方は多いかもしれません!では、また。今回は切り替えが可能なモーダルウィンドウの作成方法をご紹介します。デモページを用意したのでご覧ください。今回はこれを作っていきたいと思います。https://www.tipdi...2018.09.19サイト内検索が簡単に導入できる!Googleカスタム検索の設置方法2016年2月に神戸市のウェブサイトがリニューアルされ、検索窓が全面にフィーチャーされたトップページになりました。