LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-27

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

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>
  • 対応しているのを選んで使用してくれるということでしょうか。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5