在vue中写行内样式
<div :style="'margin-bottom: 16px'"></div> 或
<div :style="{marginBottom: '16px'}"></div>
使用第二种方式，不能通过 - 连接，用小驼峰的方式拼接。
行内样式中存在变量
<div :style="`min-height: ${pagingMinHeight}px`"></div> 或
<div :style="{marginBottom: pagingMinHeight+'px'}"></div>
在vue组件中的样式
<template>
<div class="test"></div>
</template>
<style lang="less" scoped>
.test{
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
lang 属性可以赋值 scss（sass）、less等等
使用 scss（sass）或者 less 需要额外安装包和配置才可以使用。
使用less时
cnpm i less less-loader --save 或者
npm i less less-loader --save
使用 scss（sass）
npm i node-sass sass-loader --save
不同的vue项目配置方式时不同的。
vue中的style还有另外两个属性 scoped 和 module
style scoped 模式
使用
<template>
<div class="test"></div>
</template>
<style lang="less" scoped>
.test{
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
作用 加上唯一标识，本组件的样式只作用于本组件，不会污染公共样式。
style module模式
扫描二维码关注公众号，回复：
12855097 查看本文章
<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>
module模式会根据一定的规则重新生成类名称或者标记，不会出现类名重复，样式污染的问题。
无论是scoped还是module,都造成了一个新的问题
当你业务需求，需要改变公共组件的样式时，如果公共组件使用了scoped或者module，样式将无法被覆盖。
公用样式
在app.vue文件中引入公共样式或者在style标签中书写公共样式时不加 scoped或者module。
app.vue中的样式书写举例子
如果没有配置less就别加lang=“less” 公共样式不需要scoped和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>