Vue.js クラスのバインディングのサンプルコード

Vue.js クラスのバインディングのサンプルコード

vue.jsでhtmlのクラスを動的に変更するサンプルコードです

環境

  • OS  Windos10
  • エディタ VScode

基本構文

active と記載された箇所がクラス名
show と記載された箇所が true / false( 真偽値 )となります

true であれば activeクラスが有効になり、falseであれば無効になります。

サンプルコード

下記のソースコードをindex.htmlとして作成して保存します

vue.jsは下記の開発バージョンのものを利用してます <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

保存したファイルをブラウザで開いて確認 。

「クラスを有効にする」ボタンをクリックすると、activeクラスが有効になり、記述した.activeのCSSが適応されます