最近根据设计要求app需要根据不同环境切换不同样式,网上找了很多方法都不理想,后面自己脑洞大开这么完成的,请大佬多指教!

一、新建全局变量js文件和公用样式文件,在main.js中引入

import './css/en.css'
import './css/a.css'
import globalVariable from './components/js/global_variable'
Vue.prototype.GLOBA = globalVariable

二、global_variable.js文件中这么写

let lang = JSON.parse(localStorage.getItem('language_s') == null ? 1 : localStorage.getItem('language_s'))
let en = ""
if(lang === 1){
    en = ""
}else{
    en = "a"
}
export default {
     mar_l:"mar_l" + en,

三、html中引入类名

:class="GLOBA.mar_l"

四、切换点击事件

用localStorage保存值后刷新浏览器。

注意:ios需要用 location.reload()

vue多套样式切换的更多相关文章

  1. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  2. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  3. Vue 动态绑定CSS样式

    今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4  使用进度条的话 就没有2.9. ...

  4. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  5. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  6. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

  7. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Vue 内联样式的数据绑定

    Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...

  9. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

随机推荐

  1. spring-boot war包部署(二)

    环境 jdk 8 tomcat 8.5 sts 4.4.2 maven 3.6.1 背景 有时候,服务器已经有了,我们必须要使用 war 包进行部署,所以需要 spring boot 支持打包和部署成 ...

  2. [POI2011]ROT-Tree Rotations 题解

    题面 这道题咋看都是无法从dp入手,那么就从数据结构入手!: 首先你要会权值线段树和线段树合并. 然后你要知道: 对于任意一个节点,交换左右子树对当前节点和前面的所有节点没有影响. 因为这是前序遍历: ...

  3. 剑指offer8:青蛙跳台阶

    1. 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 2. 思路和方法 青蛙每一次跳跃只有两种选择:一是再跳1级阶梯到 ...

  4. 倍增-RMQ问题Sparse-Table算法

       提示 code: #include<bits/stdc++.h> #define ll long long #define inf 0x7fffffff using namespac ...

  5. python设计购物车

    设计购物车 一需求: 1.启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提 ...

  6. Java函数式接口

    函数式接口定义且只定义了一个抽象方法.函数式接口的抽象方法的签名称为函数描述符.Java 8的java.util.function包中引入了几个新的函数式接口. 1.Predicate java.ut ...

  7. dev gridview表格按钮

    固定列的位置 添加按钮控件位置,使用buttonEdit 添加按钮 按钮属性设置 按钮设置后的效果 //注册按钮事件 this.ribtndata.ButtonClick += new DevExpr ...

  8. git commit报错解决,绕过代码检查

    上一个项目用的svn,新项目用了git,很开心,终于学习了git了,本以为把git都学会了,但是还是遇到了一个不在自己学习的知识点范围内的问题,最后是同事帮忙解决的. 问题:第一次代码commit的时 ...

  9. HTML实现三角形和旗帜代码

    1.三角形 1.1html+css <style> *{ margin: 0px; padding: 0px; } span{ display: block; margin-left: 2 ...

  10. 转载: Linux查看系统开机时间

    转自: https://www.cnblogs.com/kerrycode/p/3759395.html 查看Linux系统运行了多久时间,此时需要知道上次开机启动时间: 有时候由于断电或供电故障突然 ...