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组件库.同时将 ...
随机推荐
- n*n矩阵 每行每列XOR为0(思维)
题意:https://codeforc.es/contest/1208/problem/C 如题:就是给定一个数n,要你求一个n×n的矩阵,矩阵中的元素是 0 ~ n2-1 ,使得矩阵每一行和每一列的 ...
- Golang Module快速入门
前言: 在Golang1.11之前的版本中,官方没有提供依赖和包管理工具.开发者通常会使用vendor或者glide的方式来管理依赖(也有直接使用GOPATH多环境方式),而在Golang1.11之后 ...
- 拜托,别再问我 QPS、TPS、PV、UV、GMV、IP、RPS 好吗?
关于 QPS.TPS.PV.UV.GMV.IP.RPS 这些词语,看起来好像挺专业.但实际上,我认为是这是每个程序员必懂的知识点了,你可以搞不懂它们怎么计算的,但是你最少要知道它们分别代表什么意思吧? ...
- pat l2-14 列车调度 dilworth+nlog(n)最长上升子序列
关于dilworth定理 这里引用一个大神的(http://blog.csdn.net/xuzengqiang/article/details/7266034) 偏序的概念: 设A是一个非空集,P是A ...
- Java lesson16homework
package lesson16; /** * 1. 随机生成4个0到9的整数,组成一个序列(使用LinkedList<Integer>存储) 例如:3 6 4 4 2. 然后要求用 ...
- Java object-oriented8/5
package Chapter1.Class;/** * 制作一个简单的通讯录.. * @author LENOVO * */public class ClassDemo_01 { String na ...
- O050、Create Volume 操作 (Part I)
参考https://www.cnblogs.com/CloudMan6/p/5603312.html 前面已经学习了Cinder的架构和相关组件,从本节开始详细分析 Cinder 的各种操作,首先 ...
- opencv3.3.1 + win64 + contrib + cuda 编译
一 . opencv3.3.1 + win64 + contrib + cuda 编译 1.下载各种依赖 下载安装cuda https://developer.nvidia.com/cuda- ...
- #!/usr/bin/node 是什么意思
// 调用系统环境变量中的解释器执行文件 #!/usr/bin/node //如果不是默认安装位置这个地方可能就找不到,那么文件就是报错,所以有了另一种写法 #!/usr/bin/env node
- element-ui select
1. 组合 label <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...