一、动态使用样式

二、全局公共css样式文件

2.1 main.js中引入

2.2 index.html引入

三、单个vue文件中引入样式

四、样式作用范围控制

4.1 scoped私有作用域

4.2 混合使用

4.3 深度作用选择器

4.4 动态生成的dom的样式

一、动态使用样式

使用场景：根据不同的值使用不同的样式，或者给样式某个属性设置一个变量值

使用方法：

使用不同的class

：class=" { 'classA' : f，'classB'：g } " //条件f成立则使用style标签中定义好的classA样式，条件g成立则使用classB样式

:class="[isState==true?'text':'text1']"   //isState是true样式是text，是false这是text1

使用style设置某个变量的值

：style="{'width':widthLength+'px'}" //给width一个变量值widthLength

使用计算属性calc(100% - 100px)

一般只能计算宽度高度，注意中间的减号“-”，前后一定要加空格，并且父级的高度宽度一定要有，可以100%，否则使用无效。

使用函数绑定样式：

:style="{'color':formateTitleColor(val)}"

//格式化标题颜色formateTitleColor(val){if(val<24 && val>=0){return '#f7b13f'}if(val>=24){return '#000'}if(val<0 ){return '#f5616f'}}

二、全局公共css样式文件

提醒：vue工程中css文件和js文件最好都放在static文件夹下面，可以降低报错的概率。

2.1 main.js中引入

在入口js文件main.js文件中引入。

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUi from 'element-ui'
import '../common/mainStyle.css'   //引入全局样式Vue.config.productionTip = false
Vue.use(ElementUi);
/* eslint-disable no-new */
new Vue({router,render: h => h(App)
}).$mount('#app');

2.2 index.html引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>styletest</title><link rel="stylesheet" href="./static/css/global.css"> /*引入公共样式*/</head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

三、单个vue文件中引入样式

vue文件style标签中import引入样式：

@import "../assets/common/common.css";//自定义.css的样式路径

四、样式作用范围控制

很多时候，我们希望样式只在当前组件生效，样式可以私有化，避免影响其他的组件，造成全局的样式污染。

4.1 scoped私有作用域

在style标签中添加scoped属性，可以使样式只在当前的组件中生效，样式私有化。

<style scoped>
.example {color: red;
}
</style>

原理：

其原理是在编译的时候，会给每个组件中的所有的dom节点样式添加一个唯一的data属性。

4.2 混合使用

在一个组件中同时使用scoped和非scoped样式。特别是对第三方组件样式的修改，想修改第三方组件的样式，又不想去掉scoped属性，影响别的组件。

<style>
/* 全局样式 */
/* 将修改第三方组件的样式写在这里 */
/* 组件的最外层标签定义一个唯一类，最好将样式都写在这个类名下，以防组件间互相影响 */
</style><style scoped>
/* 本地样式 */
</style>

4.3 深度作用选择器

如果希望scoped样式中的一个选择器能够作用的更深，例如影响子组件，可以使用 >>> 操作符。

<style scoped>.a >>> .b { /* ... */ }
</style>

备注1：别名

/deep/是>>>的别名

像sass之类的预处理器无法正确解析>>>。可以使用/deep/替代

<style scoped>.a /deep/ .b { /* ... */ }
</style>

备注2：深度选择器修改第三方组件样式

在第三方组件内部类外面套个类，再利用深度选择器这样可以修改样式，且不影响其他组件

<style scoped>外层组件类 >>> 第三方组件内部类 {样式}
</style>

4.4 动态生成的dom的样式

通过v-html创建的DOM内容不受scoped样式影响，但是仍然可以通过深度作用选择器来设置样式。

Vue项目：style样式篇相关推荐

23.Vue绑定style样式
目录 1.style样式对象写法 2.style样式数组写法 3.总结 22.Vue绑定class样式_爱米酱的博客-CSDN博客为了讲好class样式,我们这里提前准备了7个样式作为例子来讲解. b ...
Vue项目性能优化篇
Vue项目性能优化是个老生常谈的问题了,本人开发过程中也查过很多关于Vue项目优化的文章,每篇文章说的都差不多,本章我就结合我的心得和大家的智慧做一个总结. 1.懒加载懒加载应该是提高性能的最简单有 ...
vue项目在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass less和sass需要安装相应的依赖 package.json 中加上并再次npm install 重启项目 "less": ...
Vue 中英文组件样式写法
Vue 中英文组件样式写法 Vue 项目国际化样式处理一.全局(main.js)添加自定义指令: v-lang 会自动添加语言对应的 class [中:zh,英:en] Vue.direct ...
利用vscode stylelint插件实现ctrl+s自动格式化vue项目中的css、scss
vscode stylelint使用 1. vscode stylelint插件安装及配置 vscode stylelint插件版本 vscode中配置stylelint和开启自动修复 2. 安装st ...
MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目
windows搭建vue项目看这篇
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目上一篇:Ubuntu 下部署 SpringBoot 第一步: Ubuntu 上安装 nodejs 执行 apt install nodejs 命令 ...
Vue项目在标签中如何书写多个内敛style样式
Vue项目在标签中如何书写多个内敛style样式例如:对一个数组进行循环,我想给偶数项的添加红色背景,奇数项的添加蓝色背景,这时候就可以用v-bind:style="[]",详细 ...
Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录前言完效果图 : 登录含签权注册带正则个人中心下拉加载更多主页修改个人中心视频播放加关注+收藏评论盖楼A回复B B回复C C回复A类似项目开始封装登录.注册封装登录从零到一 ...

Vue项目：style样式篇

一、动态使用样式

二、全局公共css样式文件

2.1 main.js中引入

2.2 index.html引入

三、单个vue文件中引入样式

四、样式作用范围控制

4.1 scoped私有作用域

4.2 混合使用

4.3 深度作用选择器

4.4 动态生成的dom的样式

Vue项目：style样式篇相关推荐

最新文章

热门文章