vue多套样式切换
最近根据设计要求app需要根据不同环境切换不同样式,网上找了很多方法都不理想,后面自己脑洞大开这么完成的,请大佬多指教!
一、新建全局变量js文件和公用样式文件,在main.js中引入
二、global_variable.js文件中这么写
三、html中引入类名
:class="GLOBA.mar_l"
四、切换点击事件
用localStorage保存值后刷新浏览器。
注意:ios需要用 location.reload()
vue多套样式切换的更多相关文章
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
- Vue 动态绑定CSS样式
今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4 使用进度条的话 就没有2.9. ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法
vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue 内联样式的数据绑定
Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...
- VUE中CSS样式穿透
VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...
随机推荐
- mybatis-plus配置多数据源invalid bound statement (not found)
mybatis-plus配置多数据源invalid bound statement (not found) 错误原因 引入mybatis-plus应该使用的依赖如下,而不是mybatis <de ...
- Spring Boot 面试总结(一)
1.使用 Spring Boot 前景? 多年来,随着新功能的增加,spring变得越来越复杂.只需访问https://spring.io/projects页面,我们就会看到可以在我们的应用程序中使用 ...
- 从入门到自闭之Python--MySQL数据库安装
分类: 关系型数据库:mysql oracle sqlserver sqllite 非关系型数据库:redis mongodb memcache hbase 安装: 网址:https://www.my ...
- python3列表、元组
列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作.列表中的每个元素都分配一个数字也就是它的位置,或叫索引,第一个索引是0,第二个索引是1,依此类推. ...
- Elastic Search中Document的CRUD操作
一. 新增Document在索引中增加文档.在index中增加document.ES有自动识别机制.如果增加的document对应的index不存在.自动创建,如果index存在,type不存在自动创 ...
- pb datawindow 类型
DataWindow.Processing 判断 DataWindow 对象的类型 可用 DataWindow.Processing 判断 DataWindow 对象的类型,dw的类型如下: ...
- yum更新出错-解决
Total download size: 14 MIs this ok [y/d/N]: 命令里已经yum install -y了,但是还是需要选择Y,N没有自动执行,请问这个要怎么破. PS:我是在 ...
- 牛客 40E 珂朵莉的数论题
大意: 给定$x,y$, 求第$x$小的最小素因子为$y$的数, 若答案>1e9输出0. 若$y>=60$, 可以暴力筛出1e9/60以内的答案. 否则容斥+二分算出答案. #includ ...
- maven工程下整合spring+mybatis报Mapped Statements collection does not contain value for spring-mybatis-user-get错误
在整合spring+mybatis报了下面的错误: Mapped Statements collection does not contain value for spring-mybatis-use ...
- 动画方案 Lottie 学习(一)之基础
参考 lottie系列文章(一):lottie介绍 lottie系列文章(二):lottie最佳实践 lottie系列文章(三):动画设计规范 lottie系列文章(四):源码分析——svg渲染