JavaScript
Node.js
vue.js
pug

初心者がVue.jsの公式ガイドを勉強するメモ クラスとスタイル編

クラスとスタイルのバインディング

HTML クラスのバインディング

オブジェクト構文

  • App.vue
<template lang="pug">
  #app
    div.static(:class="{ active: isActive, 'text-danger': !isActive }") see class
    button(@click="isActive=!isActive") ClassChangeToggle

    div(:class="classObject") see class

    div(:class="classObjectComputed") see class
    button(@click="toggleMethod") ClassChangeToggle

</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data () {
    return {
      isActive: true,
      error: false,
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  },
  computed: {
    classObjectComputed () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error
      }
    }
  },
  methods: {
    toggleMethod () {
      this.classObject.active = !this.classObject.active,
      this.classObject['text-danger'] = !this.classObject['text-danger']
      this.error = !this.error
    }
  }
}
</script>

  • これだけでも、十分いろんなことができそうです。
  • 簡単なものは、テンプレートに書く。
  • ゴチャゴチャしたら、data側に置くまたは、computedでclassを管理する。
  • 細かい条件が必要なら、computedになりますね。

配列構文

  • App.vue
<template lang="pug">
  #app
    div(v-bind:class="[activeClass, errorClass]") Array
    div(:class="[isActive ? activeClass : errorClass]") array 3項演算子
    div(:class="[{ active: isActive}, isActive ? '' : errorClass]")

    button(@click="isActive = !isActive") Toggle Button

</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data () {
    return {
      isActive: true,
      activeClass: 'active primary-color bg-md-12',
      errorClass: 'text-danger'
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>


  • 最初、配列にしてなにが便利なのかと思いましたが、長いclass名をつけているときなどにもつかえます。
  • 3項演算子で一気に変えれますね、尚切り替える場合、配列要素が必要です。
  • 書き方としては、外を配列でくるんで、中をオブジェクトで書けば両方対応できます。
  • class指定を、object形式にするのは、jsらしいですが、最初は、class名とキーと値がごっちゃになりややこしいです。(笑)

コンポーネントにおいて

  • App.vue
<template lang="pug">
  #app
    my-component
    my-component.baz.boo
    my-component(:class="{active: isActive}")

</template>

<script>
import Vue from 'vue'

Vue.component('my-component', {
  template: `<p v-bind:class="{componentActive: isActiveComponent}" class="foo bar" > component p </p>`,
  data: () => ({
      isActiveComponent: true
    })
  })

export default {
  name: 'app',
  data () {
    return {
      isActive: true
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>

  • コンポーネントは、最初使いませんので、飛ばしてもいいようにも思います。
  • コンポーネントに置いたclass属性がどうなるかの説明です。
  • コンポーネント側に書いてある、class名は通常上書きされず、後から追加した分と合わせて表示されるみたいです。
  • コンポーネントに書くclass属性ですが、書く場所によりdataプロパティが違うので、違いの把握をしておいてください。

インラインスタイル

オブジェクト構文

  • App.vue
<template lang="pug">
  #app
    div(:style="{ color: activeColor, fontSize: fontSize + 'px'}") Style
    div(:style="styleObject") StyleObject
    div(:style="styleComputed") styleComputed

</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data () {
    return {
      activeColor: 'blue',
      fontSize: '30',
      styleObject: {
        color: 'red',
        fontSize: '20px'
      }
    }
  },
  methods: {
  },
  computed: {
    styleComputed () {
      return {
        color: this.activeColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

  • css styleもオブジェクトで書きます。
    • ケバブケース、キャメルケースお好みで書けるみたいです、ここではJSで書きやすいキャメルで書くことにします。
  • styleもテンプレート、dataプロパティ、computedにお好みでおけます。
  • 最初サブ扱いと思っていたのですが、activeに切り替える要素は、ここがメインなのかもしれないですね。

配列構文

  • App.vue
<template lang="pug">
  #app
    div(:style="[baseStyles, overridingStyles]") ArrayClass

</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data () {
    return {
      activeColor: 'blue',
      fontSize: '30',
      baseStyles: {
        color: 'red',
        fontSize: '20px',
        fontFamily: 'Arial'
      },
      overridingStyles: {
        color: 'blue',
        fontSize: '30px',
        fontWeight: 'bold',
      }
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>



  • こちらも、配列がつかえるみたいです、この場合は基本スタイルと上書きスタイルがマージされて適用されます。
         
         

    自動プリフィックス

  • App.vue

<template lang="pug">
  #App
    div(style="user-select: none") auto prefix

</template>

<script>

export default {
  name: 'app',
  data () {
    return {
    }
  },
  computed: {
  }
}

</script>
  • 自動プリフィックス搭載済みみたいです。 たしかに現在のchromeでは、prefixついていませんが、safariで見ると、-webkit- がつけられているのがわかります。
  • これは、safariもupdateされると、見れなくなると思います。

複数の値

  • App.vue
<template lang="pug">
  #App
    div(:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }") Vue 2.3 over support

</template>
  • 対応しているのを選んで使用してくれるということでしょうか。

  • 今回は、これで終了です。  次回は、条件付きレンダリングです。