最近根据设计要求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. 【LOJ】#3044. 「ZJOI2019」Minimax 搜索

    LOJ#3044. 「ZJOI2019」Minimax 搜索 一个菜鸡的50pts暴力 设\(dp[u][j]\)表示\(u\)用\(j\)次操作能使得\(u\)的大小改变的方案数 设每个点的初始答案 ...

  2. 【C++11应用】基于C++11及std::thread实现的线程池

    目录 基于C++11及std::thread实现的线程池 基于C++11及std::thread实现的线程池 线程池源码: #pragma once #include <functional&g ...

  3. php 一些常用函数

    1.var_export() var_export — 输出或返回一个变量的字符串表示此函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP ...

  4. C#常见面试题(一)——try-catch-finally-return

    面试常会被问及try-catch-finally,现在做一下总结: 第一.不管有没有出现异常,finally块中代码都会执行. 第二.finally 代码块中不能有return. 第三.如果try 或 ...

  5. 【xlwings】 wps 和 office 的excel creat_sheet区别

    最近在学习 xlwings,参考学习的网址:https://www.jianshu.com/p/b534e0d465f7 写得很棒,学到了很多. 在新建sheet表单, 发现一个问题. import ...

  6. T100——修改单身栏位,开窗,当前行

    PRIVATE FUNCTION axmt500_update_xmdc028() ###更改出货库位 DEFINE l_i INT DEFINE l_index INT DIALOG ATTRIBU ...

  7. Spring Boot源码分析-启动过程

    Spring Boot作为目前最流行的Java开发框架,秉承"约定优于配置"原则,大大简化了Spring MVC繁琐的XML文件配置,基本实现零配置启动项目. 本文基于Spring ...

  8. 并不对劲的bzoj4001:loj2105:p3978:[TJOI2015]概率论

    题目大意 随机生成一棵\(n\)(n\leq10^9)个节点的有根二叉树,问叶子结点个数的期望. 题解 subtask 1:\(n\leq100\),70pts 结论:不同的\(n\)个节点的有根二叉 ...

  9. WCF寄宿windows服务一

    如果只是寄宿单个wcf服务,方法很简单,步骤:1.创建好一个windows服务.关于windows服务内容见:http://www.cnblogs.com/zhaow/p/7866916.html2. ...

  10. ChinaCock扫描控件介绍-使用TCCBarcodeScanner引起app闪退

    好几个ChinaCock的朋友说遇到扫码时闪退,进一步总结,都是Android 8的机器上才会出现,今天我也遇到.正好有朋友说,按下面这个改配置文件就可以解决: <!-- 扫描的activity ...