Posted in vuejs

[Vue.js] v-on:clickでclassを設定し要素の色を変化させる

   Published Date: 2020年5月14日

Vue.jsのv-on:clickを使い、要素の色を変化させてみます。CSSのクラスに色（colorやbackground-color）を設定しておき、それをVueインスタンスのcomputedで切り替えます。

ボタンでクラスを切り替え

まず、CSSを作成します。
[CSS]

.red{
  color: red;
}

.yellow{
  background-color: yellow;
}

[HTML]
HTMLはこのようになります。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">

    <button v-on:click="isActive = !isActive">
    色が変わります
    </button>
<p v-bind:class="classColorSet">
クラスによる色の変更
</p>

  </div>
</body>
</html>

ボタンにv-on:clickを設定します isActive = !isActive という記述はボタンのクリックによって状態を変化させる時によく使う書き方です。これはクリックするたびに逆になるという意味です。「!」は否定（逆）という意味です。

これからVueインスタンスに isActiveという変数を設定し、これをデフォルトではtrueにします。
ボタンをクリックするたびに true　→ false → true　→ false というように変化します。

pタグのところは v-vaind:classに関数を指定しています。

[Vueインスタンス]

new Vue({
el: '#app',
data:{
	isActive:true
},
computed:{
 　classColorSet: function(){
 　　return {
　　　	red:this.isActive,
 　　　 yellow: !this.isActive　
　　　}　
 　}
　}
})

jsfiddleで実験してみました。

2020-05-14_15h37_22

[実行時]
2020-05-14_15h35_10

[ボタンクリック後]
2020-05-14_15h35_29

配列で色を指定

配列でクラスを指定することもできます。dataにcolorなどを指定しておいて、HTMLのv-vind:classに配列で指定します。v-vind:class=”[要素1,要素2…]”が構文になります。
[HTML]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
 
   <p v-bind:class="[color,bgColor]">
   Hello World!
   </p>

  </div>
</body>
</html>

[JavaScript]

new Vue({
el: '#app',
data:{
	color:'red',
  bgColor:'yellow'
 }
})


Author: webmaster