Write inline style in vue
<div :style="'margin-bottom: 16px'"></div> 或
<div :style="{marginBottom: '16px'}"></div>
Using the second method, you can't connect through-and use the small hump to splice.
Variables in inline style
<div :style="`min-height: ${pagingMinHeight}px`"></div> 或
<div :style="{marginBottom: pagingMinHeight+'px'}"></div>
Style in vue component
<template>
<div class="test"></div>
</template>
<style lang="less" scoped>
.test{
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
The lang attribute can be assigned to scss (sass), less, etc.
Using scss (sass) or less requires additional installation packages and configuration before it can be used.
When using less
cnpm i less less-loader --save 或者
npm i less less-loader --save
Use scss (sass)
npm i node-sass sass-loader --save
Different Vue project configuration methods are different.
The style in vue has two other attributes, scoped and module
style scoped mode
use
<template>
<div class="test"></div>
</template>
<style lang="less" scoped>
.test{
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
Function plus a unique identifier, the style of this component only works on this component, and will not pollute the public style.
style module mode
<template>
<div>
<img :class="$style.activityCover" :src="cover" alt="" />
</div>
<template>
<style lang="less" module>
.activityCover {
width: 100%;
height: 110px;
border-radius: 4px;
margin-bottom: 20px;
overflow: hidden;
}
</style>
The module mode will regenerate the class name or mark according to certain rules, and there will be no problems of duplication of class names and style pollution.
Whether it is scoped or module, it has caused a new problem
When your business needs need to change the style of public components, if the public component uses scoped or module, the style will not be overwritten.
Common style
When introducing public styles in the app.vue file or writing public styles in the style tag, do not add scoped or module.
Examples of style writing in app.vue.
If less is not configured, don’t add lang=“less”. Public styles do not require scoped and module.
<style lang="less">
// 如果还有其它样式需要引入，直接用@import 引进来。
// 我这里引入的是node_modules中的两个样式文件。
@import '~vant/lib/style/var.less';
@import '~@scf/ding-style-less/var.less';
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html body {
margin: 0 auto;
position: relative;
background-color: @color-bg-page;
.fix-max-width();
}
#app {
font-family: @base-font-family;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: @color-text;
font-size: 12px;
min-height: 100vh;
}
.fixed-wrapper {
.fix-max-width();
margin: 0 auto;
}
.page-bg-fff {
background-color: #fff;
overflow: hidden;
}
</style>