Vue.jsで申し込み同意でボタンをアクティブにするチェックボタンの作成 - 株式会社CoLabMix

Vue.jsで申し込み同意でボタンをアクティブにするチェックボタンの作成

Vue.jsはEvan You作成による軽量JSフレームワークです。

Googleが作った「AngularJS」やFacebookが作った「React」のような大規模アプリケーション向けではなく、ちょっとした表示をSPA(シングルページアプリケーション)で作成してみる時などに利用できます。

かなり簡易に利用できるので今回は申し込み同意でボタンをアクティブにするチェックボタンの作成を行ってみました。

 

サンプルの作成

Vue.jsの利用はJSファイルの読み込みをするだけで利用できます。

CDNなども利用されているのでVue.jsのファイルを読み込みながら作成してみました。

HTMLファイルでローカルでの確認ができます。

 

画面では以下のようになります。

見た目を整えるのにBootStrapのCSSもCDNから取り込んでいます。

「v-model」でページの項目の読み込みを行っています。

「v-bind」でbuttonの要素の変更を実施しています。

かなりシンプルにはなっていますが頻繁に作成する項目ではありますので利用の頻度は高そうです。

 

このブログは株式会社CoLabMixによる技術ブログです。

GCP、AWSなどでのインフラ構築・運用や、クローリング・分析・検索などを主体とした開発を行なっています。

Ruby on RailsやDjango、Pythonなどの開発依頼などお気軽にお声がけください。

開発パートナーを増やしたいという企業と積極的に繋がっていきたいです。

お問い合わせやご依頼・ご相談など

     

    関連記事

    1. Elasticsearch 6 を使ったデータ検証 その5( クエリ …

    2. [Rails] SJISのエクスポートでの「ActionView::T…

    3. AWSのLambdaでScrapyを動かす その1

    4. python-twitterのライブラリを使用して、pythonでtw…

    5. Python で Elasticsearch の settings と…

    6. CentOS7 + Apache2.4 を 無料 の SSL 「Let…