vue中的 *** 作样式

在vue里面常用的 *** 作样式有以下几种:

1 静态类名: 这种和普通的html的样式写法相同: <p class="name">一行字</p>

2 动态样式1:类名绑定data里面的数据 : <p :class="name1">一行字</p>

3 动态样式2: 类名绑定data里面的数据(常用) :class里面是一个对象,键为类名,值为布尔值 : <p :class="{name:isName , sex: isMan}">一行字</p>

4 style样式: <p :style="{color:green , font-size: fz + px}">一行字</p>

还有其他以下写法( 其思想即绑定data里面的数据 通过改变数据而达到修改样式的目的):

1 <p :class="[ { name:isName } , sex]">一行字</p>

2 <p :class=" { name: true} ">一行字</p>

将多个 样式对象 应用到一个元素上

<p :class=" [red, fontSize] ">一行字</p>

Vue3支持使用CSS来定义激活样式。你可以通过在CSS中设置类选择器来设置激活样式，例如：

.active {

background-color: blue

color: white

}

你也可以使用v-bind:class来动态添加激活样式，例如：

<div v-bind:class="{ active: isActive }">...</div>

或者使用v-bind:style来动态添加激活样式：

<div v-bind:style="{ backgroundColor: color }">...</div>

方法一：rem单位 使用amfe-flexible和postcss-pxtorem （写的时候需要转换单位）

vant本身是px单位的，实际项目设计图是750px宽，若要实现同时自适应，需要结合两个插件：

amfe-flexible和postcss-pxtorem

步骤如下

一、如何将px单位转化为rem？

借助 postcss-pxtorem 插件，postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。

安装：

配置：vue.config.js文件

二、如何做rem适配？

rem适配文档上建议使用 lib-flexible ，flexible适配的原理是物理像素与逻辑像素的相互转化：物理像素px = window.screen.width(逻辑像素pt) * window.devicePixelRatio

如何配合框架使用:

1.安装

2.main.js引入

（index.html要设置meta）

————————————

关于使用

为了要使用vant的样式，rootValue应设置为37.5

设计图是750px宽的，则写的时候如果用px 则需要除以2，如果用rem的话，要自行计算 px/75=rem，或者使用IDE的插件计算

使用蓝湖的话，很方便

另，如果不使用vant，单纯的还原设计图

可以将rootValue设置为75，css像素可以直接按设计图写

参考： https://www.cnblogs.com/changxue/p/11322855.html

方法二（推荐）：vw单位 使用postcss-px-to-viewport （自定义的样式）

安装

npm install postcss-px-to-viewport --save-dev

配置：

使用这个 vant的单位不变 自定义的单位可直接写px 会转化为vw

---