1. The usual inline style and selector style are definitely possible:
<div style="height:20px;width:20px;background:red"></div>
2. Vue specific
Description:
The class list and inline style of operating elements is a common requirement for data binding. Because they are all attributes, so weYou can use v-bind to process them: just use the expression to calculate the string result.
However, string concatenation is troublesome and error-prone. Therefore, when using v-bind for class and style, Vue.js has made special enhancements. In addition to strings, the type of expression result can also be an object or an array.
Can be a string or an array of objects
2.1 There are class and :class in the line, style and :style can be the same, and both work
<div style="height:50px;width:120px;background:red" :style="{color:activeColor,fontSize:fontSize + 'px'}"> 凡夫俗子</div>
2.2 Binding html class
2.2.1 Object syntax
模板：
// {active, color} 不跟布尔表示是true的想法也是错的
<div
class="button_container"
:class="{ active: isActive, color: isColor}"
>
凡夫俗子
</div>
data：
data() {
return {
isActive: true,
isColor: true
};
}
css：
.active {
font-size: 20px;
}
.color {
color: red;
}
看到这里有些人可能有一个想法，改成如下：
这是万万不行的，这样就不是字符串了。
<template>
<div
class="button_container"
:class="styleObject"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isColor: true,
styleObject: {
active: this.isActive,
color: this.isColor
}
};
},
created() {
},
methods: {
},
computed: {
},
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
When isActive or isColor changes, the class list will also be updated, and the attempt will also be updated. This is the data-driven view.
At this point, you can use the calculated attributes to change the display method:
<template>
<div
class="button_container"
:class="classObject"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isColor: true,
};
},
created() {
},
methods: {
},
computed: {
classObject: function() {
return {
active: this.isActive,
color: this.isColor
}
}
}
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
2.2.2 Array syntax
<template>
<div
class="button_container"
:class="[activeClass,colorClass]"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: 'true',
activeClass: 'active',
colorClass: 'color'
};
},
created() {
},
methods: {
},
computed: {
}
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
How to perform a conditional rendering with array syntax
//会始终添加colorClass的类，但是activeClass会进行条件添加
<div
class="button_container"
:class="[isActive ? activeClass:'', colorClass]"
>
凡夫俗子
</div>
If there are multiple class attributes that require a conditional rendering
<div
class="button_container"
:class="[{active: isActive},colorClass]"
>
凡夫俗子
</div>
2.2.3
Used on components When using class property on a custom component,These classes will be added to the root element of the component. The existing class on this element will not be overwritten.
//组件代码
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
Two classes are added when using:
<my-component class="baz boo"></my-component>
Final rendering of the component:
<p class="foo bar baz boo">Hi</p>
Of course, it is also possible to perform a data binding with the above-mentioned object or array style syntax.
<my-component :class="{ active: isActive }"></my-component>
When isActive is true, then html will be rendered as
<p class="foo bar active">Hi</p>