Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8669

Vue.jsの始め方②(classのデータバインディング)

$
0
0

Vue.jsの始め方②(classのデータバインディング)

今回はclass属性のデータバインディングの基礎です

前回の記事はこちら
Vue.jsの始め方①(html/css/js/jQueryがある程度わかる方向け)

classのデータバインディング基礎

以下のhtml,js,CSSを記述してブラウザーで実行してください

index.html
<divid="app"><p>
   Hello<spanclass="bg-gray text-blue"v-bind:class="{large: isLarge, 'text-danger': hasError}"> vue.js</span></p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
"></script><!--Vue.js 読み込み--><script src="js/script.js"></script><!--javascript 読み込み-->
index.js
varapp=newVue({el:'#app',data:{isLarge:true,hasError:true}})
index.css
.large{font-size:36px;}.text-danger{color:red;}.bg-gray{background-color:gray;}.text-blue{color:blue;}

実行結果
Image from Gyazo

今回はプレーンなCSSとして'bg-gray'と'text-blue'を設定しました
それに対してVue.jsのデータバインディングでクラス属性を追加しています。

isLarge: true → .large クラスを追加
hasError:true → .text-danger クラスを追加

クラス名にハイフンが入る場合はhtml内のV-bind記述部分は
''が必要になりますので注意してください

結果は .large .bg-gray .text-blueの3つが実行されています

処理が重なった場合は優先順位がCSSの読み込み順になります。
よって.text-dangerクラスは.text-blueクラスに上書きされている形です

このようにvue.jsを使用するとクラスのデータを複数動的に切り替えることが可能です。

オブジェクトデータの利用

classを複数渡すとコードの可読性が悪くなるため
以下のようにオブジェクトとすることも可能です。

index.html
<divid="app">  Hello <spanv-bind:class="classObject">Vue.js!</span></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
"></script><script src="js/script.js"></script>
index.js
varapp=newVue({el:'#app',data:{classObject:{large:true,'text-danger':true}}})
index.css
.large{font-size:36px;}.text-danger{color:red;}

ここではclassObjectというオブジェクトに
.large と .text-dangerの2つのクラスを格納して
V-bind:classによって追加をしています。

クラスの条件に3項演算子を使う

次にクラスの条件に3項演算子を利用します。
3項演算子とはjsのif構文を簡略記述したものです。

index.html
<divid="app">  <p>    Hello<spanv-bind:class="[isLarge ? largeClass : '',dangerClass]"> Vue.js</span>  </p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
"></script><script src="js/script.js"></script>
index.js
varapp=newVue({el:'#app',data:{largeClass:{large:true,'bg-gray':true},dangerClass:{'text-danger':true},isLarge:true}})
index.css
.large{font-size:36px;}.text-danger{color:red;}.bg-gray{background-color:gray;}.text-blue{color:blue;}

実行結果
Image from Gyazo

v-vind:classの中身は配列となっており以下が3項演算子です

isLarge  ?  largeClass  :  ' '

isLargeがtrueならlargeClassを追加しfalseなら空白とするという意味です。
dangerClassについては常に設定されます。


Viewing all articles
Browse latest Browse all 8669

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>