Vue2.x Class & Style Bindings

Posted 2021-10-05 SageKwun

Intoduciton: The way of using \'\' in html part confused me when I was learning Class&Style Bindings in Vue\'s official guide.(of course it\'s also because of my weak foundation). To help newcomer understand, Vue\'s official guide seemed a little lengthy. So I decided to reorganize them.

The follow content won\'t contain many examples, you can click the superlink above to see the official guide\'s.

Binding Inline Styles

In my opinion, key is a pointer, which means we could save the content in somewhere and use them flexibly. In some sense, class is a pointer of style. So I\'d like to introduce style firstly.

Basic syntax

• Direct：e.g.:style="{ style-name-color: data-key, style-name-fontSize: data-key + \'px\' }"

  Don\'t forget to add uint like \'px\'

• Object：:style="data-key-styleObject"

  data: {
    data-key-styleObject: {
      color: \'red\',
      fontSize: \'13px\'
    }
  }

• Array：:style="[styleObjects, overridingStyleObjects]"

  styleObjects means we could multiple "{}" and "data-key"

Advanced

• Multiple Values：:style="{ display: [\'-webkit-box\', \'-ms-flexbox\', \'flex\'] }"

  This will only render the last value in the array which the browser supports. In this example, it will render display: flex for browsers that support the unprefixed version of flexbox.(Copy from Vue official guide)

Binding HTML Classes

As I said before, class is pointer of style. The diffrence is that class is found in \\<style> while data-key is found in \\<script>.

Basic syntax

• Direct： :class="data-key" but :class=" \'class-name\' "
• Array： :class="[ data-key ]" but :class="[ \'class-name\' ]"

• Object： :class="{ class-name : data-key }" & :class="{ \'class-name\' : data-key }"

  In Object, if the class-name contains \'-\', it should be \'class-name\', otherwise there will be a error.

  In Object, if use data-key with \'\' will turn into string => \'string\', therefore it would always be true.

Advanced

• Multiple conditional classes: :class="[{ class-name: data-key }, class-name]"