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. terraformでAmazon VPC エントポイント(endpoi…

    2. AmazonLinuxでpyenvを利用してPython3.6の仮想環…

    3. オープンソース全文検索サーバーの「Fess」をCentOS7にインスト…

    4. ElasticSearchでjava.lang.OutOfMemory…

    5. [ Rails : アンチパターン ] Validation しすぎで…

    6. scrapy-redisを使って、redisを使ったクローリングを試…

    最近の記事

    制作実績一覧

    ITシステム開発の開発先・発注先の選び方を見つけるコンシェルジュサービス

    ITシステム開発の開発先・発注先の選び方を見つけるコンシェルジュサービス

    ITクリエイターのための転職・仕事情報サイト

    ITクリエイターのための転職・仕事情報サイト

    SNS分析での転職支援

    SNS分析での転職支援

    受託パートナーのマッチングとSES人材のマッチング

    受託パートナーのマッチングとSES人材のマッチング