vue.jsの基礎勉強4-v-bindを用いたclass記法とstyle記法-

Vue.js

はじめに

今回はv-bindを用いたCSSの当て方について勉強した。

See the Pen qBZBaoP by KKZoo (@kkzoo) on CodePen.

class記法について

今回はclass記法を用いて以下のcssを読み込んで行こうと思う。

.large{
  font-size: 30px;
}

.font-red{
  color: red;
}

.bg-green{
  background: green;
}

v-bindの基礎的な当て方

   <!-- 単一で用いる場合 -->
      <p>{{ messages.first }} 
        <span v-bind:class="{large: 'judg-large'}"> {{ messages.last }}</span>
      </p>

   <!-- 複数用いる場合 -->
      <p>{{ messages.first }} 
        <span v-bind:class="{large: judgLarge, 'font-red': judgRed, 'bg-green': judgGreen }"> {{ messages.last }}</span>
      </p>

  data: {
    messages: {
      first: "Hello",
      last: "Vue.js"
    },
    judgLarge: true,
    judgRed: true,
    judgGreen: false
  }

v-bindと通常の当て方の併用

      <p>{{ messages.first }}
        <span class="font-red" v-bind:class="{large: judgLarge}">{{ messages.last }} </span>
      </p>

  data: {
    messages: {
      first: "Hello",
      last: "Vue.js"
    },
    judgLarge: true
  }

dataを用いた当て方

      <p>{{ messages.first }}
        <span v-bind:class="objectClass">{{ messages.last }} </span>
      </p>

  data: {
    objectClass: {
      large: true,
      'font-red': true,
      'bg-green': true
    }
  }

三項演算子を用いた記法

      <p>{{ messages.first }}
        <span v-bind:class="judg ? objectClass : '' ">{{ messages.last }}</span>
      </p>

  data: {
    judg: true,
    objectClass: {
      large: true,
      'font-red': true,
      'bg-green': true
    }
  }

style記法について

v-bind を用いた記法にもhtmlと同様にインラインで記述する方法がある。

dataに直接cssを記述する方法

      <h2>styleを用いた記法</h2>
      <p>{{ messages.first }}
        <span v-bind:style="{color: color, fontSize: fontSize + 'px'}">{{ messages.last }} </span>
      </p>

  data: {
    color: 'blue',
    fontSize: '30px'
  }

dataにobjectとしてまとめた場合の記法

      <p>{{ messages.first }}
        <span v-bind:style="objectStyle">{{ messages.last }} </span>
      </p>

  data: {
    objectStyle: {
      color: 'blue',
      fontSize: '30px'
    }
  }

終わりに

今回はv-bindを用いてデザインを当てていく方法について勉強した。

両方の記法を勉強して感じたのは、style記法だとjavascript内に記述する内容にcssの内容が混在するためコードの可読性を下げる恐れがあると感じたので、個人的にはclass記法を用いてcssを読み込んでいく方が好みだと感じた。