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
-
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'
}
}
Copy the code
-
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]"