最近根据设计要求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. PAT B1002 写出这个数(20)

    AC代码 #include <cstdio> #include <iostream> #include <cstring> using namespace std; ...

  2. python 2 和 python 3的区别

    python2和python3区别 ​ python2:源码不统一,源码(功能)重复,维护困难,除法的时候返回来的是小数点,()浮点数 ​ python3:源码统一,源码不重复,除法的时候返回来的是整 ...

  3. js 中的 number 为何很怪异

    js 中的 number 为何很怪异 声明:需要读者对二进制有一定的了解 对于 JavaScript 开发者来说,或多或少都遇到过 js 在处理数字上的奇怪现象,比如: > 0.1 + 0.2 ...

  4. ASP.NET使用AJAX应注意IIS有没有.ashx扩展

    项目添加引用AJAX.DLL了:今天将本地做好的一个web程序放到服务器上,居然报告错误了.web程序使用了ajax来往返数据. 检查生成的html语句,有这么两句代码<script type= ...

  5. 解决centos-yum无法正常使用问题

    刚刚最小化方式安装了CentOS 7 后,说实话,真不习惯也不喜欢纯shell方式工作,使用root账号登入后,马上想安装GNOME,但是发现yum不能正常工作!!! 一,输入安装X Window命令 ...

  6. cookie、sessionStorage和localStorage区别

    // 数据存储 cookie:生命周期一般是手动设置失效的时间,大小为4k,易用性不高,需要自己封装(封装请看上一篇博客) sessionStorage:生命周期是浏览器关闭接失效,大小为5m或者更大 ...

  7. easyui-datagrid 编辑模式详解——combobox

    用于列表显示号了,需要改动某一列的值,而且根据每一行的数据去加载data数据,放在这个列中供别人选择 //-------------------- 代码可变区//---------- 数据定义区var ...

  8. 第十五章、Python多线程之信号量和GIL

    目录 第十五章.Python多线程之信号量和GIL 1. 信号量(Semaphore) 2. GIL 说明: 第十五章.Python多线程之信号量和GIL 1. 信号量(Semaphore) 信号量用 ...

  9. php生成器yield

    上次说了php的生成器Iterator,这次说一下yield 迭代生成器 (迭代)生成器也是一个函数,不同的是这个函数的返回值是依次返回, 而不是只返回一个单独的值.或者,换句话说,生成器使你能更方便 ...

  10. Nginx----请求分发中心

    Nginx请求分发中心,需要明确几个基本问题,什么是请求,分发中心是什么,为什么需要分发中心. 什么是请求? Niginx是一款高性能的HTTP服务器,这里的请求当然是指接收客户端发送的http协议请 ...