1, object syntax
We can pass v-bind: class object to dynamically switch class. Note that v-bind: class command can coexist with conventional class characteristics:
<div class="static"
v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: {
isA: true,
isB: false
}
渲染为：<div class="static class-a"></div>
2, array syntax
<div
v-bind:class="[classA, classB]">
data: {
classA: 'class-a',
classB: 'class-b'
}
渲染为：<div class="class-a class-b"></div>
3, directly bind inline style
It may be a direct binding inline style, the same, often combined object syntax calculated property using the returned object. Bind directly to a style object is usually better to make a clearer template:
<div
v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
If the article help you, help spot trouble a praise Oh! Hey! Technology bloggers do a fly!