精华内容
下载资源
问答
  • vue动态切换css

    千次阅读 2020-08-11 14:58:08
    vue动态切换css vue通过class与style绑定来动态切换css 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 ...

    vue之动态切换css

    vue通过class与style绑定来动态切换css
    我们可以传给 v-bind:class 一个对象,以动态地切换 class:

    <div v-bind:class="{ active: isActive }"></div>
    

    上面的语法表示 active 这个 class 存在与否将取决于数据 isActive 的 truthiness(真值true or false)。

    实例演示

    在这里插入图片描述

    代码及注释如下:

    <template>
      <div id="wrap" class="box">
        <div
          v-for="(list,index) in navLists"
          :key="index"
          class="nav"
          :class="{ red:changeRed == index}"
          @click="reds(index)"
        >{{list.text}}</div>
      </div>
    </template>
    

    v-for 在navLists数据中循环
    :class(即v-bind:class)绑定属性red,是否生效由changeRed == index 决定
    @click 点击事件,改变changeRed的值

    <script>
    export default {
      data() {
        return {
          navLists: [
            {
              text: "首页",
            },
            {
              text: "消息",
            },
            {
              text: "购物车",
            },
            {
              text: "我的",
            },
          ],
          changeRed: 0,
        };
      },
      methods: {
        reds: function (index) {
          this.changeRed = index;
        },
      },
    };
    </script>
    
    <style scoped>
    .box {
      -webkit-border-radius: 5px; /* 页面圆角效果处理 谷歌 */
      border-radius: 5px; /* 页面圆角效果处理 火狐 */
    
      background-clip: padding-box; /* 背景绘制区域 
       border-box	默认值。背景绘制在边框方框内(剪切成边框方框)。
       padding-box	背景绘制在衬距方框内(剪切成衬距方框)。
       content-box	背景绘制在内容方框内(剪切成内容方框)。 */
      margin: 100px auto; /* 计算外边距 */
      width: 350px; /* 容器宽度 */
      padding: 35px 35px 15px 0px; /* 四个内边距 */
      background: #fff; /* 设置背景颜色 */
      border: 1px solid #eaeaea; /* 设置边框*/
      box-shadow: 0 0 25px #cac6c6; /* 设置边框阴影*/
    }
    .nav {
      line-height: 40px;
      display: inline-block;
      margin-left: 50px;
      cursor: pointer;
    }
    .red {
      color: red;
    }
    </style>
    

    两个报错

    [vue/require-v-for-key] Elements in iteration expect to have ‘v-bind:key‘ directives

    该报错发生在vscode中,<li v-for="item in list">虽然报错但是页面能正常编译显示,v-for中缺少key值,改为:

    <li v-for="item in list" :key="item">
    

    Avoid using non-primitive value as key, use string/number value instead

    vue渲染报错,原因可能是key值不唯一:

     v-for="(list,index) in navLists"  :key="list"
    

    改为

     v-for="(list,index) in navLists"    :key="index"
    
    展开全文
  • 以APP.vue文件为例,如何引入css文件。试过很多方法,但感觉都没有成功,偶然发现两篇博主的文章,结合了一下,发现成功了。下面具体介绍一下如何引入。 首先在终端中安装 cnpm install style-loader --save-dev ...

    1.vue文件引入css样式

    刚开始写的时候代码量比较小 ,越到后面代码量越大,这样css样式也就会越大,代码不仅不美观,而且也违背了模块化的道理。

    以APP.vue文件为例,如何引入css文件。试过很多方法,但感觉都没有成功,偶然发现两篇博主的文章,结合了一下,发现成功了。下面具体介绍一下如何引入。

    首先在终端中安装

    cnpm install style-loader --save-dev
    cnpm install css-loader --save-dev
    cnpm install stylus-loader --save-dev
    

    安装完成后,打开项目的build文件夹中的webpack.base.js文件夹,在module中的rules中添加

    {
        test: /\.css$/,
        include: [
        /src/, //表示在src目录下的css需要编译
        '/node_modules/element-ui/lib/' //增加此项
        ],
        loader: 'style-loader!css-loader',
    },
    

    个人测试了一下,不需要这段代码也可以运行,但网上很多都说要添加,为了以防万一,先添加上,添加完成后保存,打开App.vue(我是以这个vue文件为例,如果要在其他文件中引入,道理一样),我在src文件夹下面新建了一个css文件夹,导入css文件即可。

    <style>
      /* 引入css样式 */
      @import './css/App.css';
    </style>
    

    这样就可以成功使用css文件了。

    2.vue动态切换组件

    在一个项目中,不可避免的需要动态切换组件,用按钮,p标签,a标签等等都可以实现。在这里主要用的是a标签动态切换组件。

    <template>
      <div>
        <div>
          <!-- href设置为javascript:void(0),没有组件的时候防止自动跳转到首部,
    			通过click属性来切换,定义一个change函数,用来切换组件
    		-->
          <a href="javascript:void(0)" @click="Change(c1)">子组件1</a>
          <a href="javascript:void(0)" @click="Change(c2)">子组件2</a>
          <a href="javascript:void(0)" @click="Change(c3)">子组件3</a>
        </div>
        <!-- 设置默认加载的组件,即我们想默认展示那个界面 -->
        <div :is="currentItem"></div>
      </div>
    </template>
    
    <script>
     // 导入子组件
     import c1 from '@/components/c1';
     import c2 from '@/components/c2';
     import c3 from '@/components/c3';
    
     export default {
       data () {
         return {
           c1: 'c1',
           c2: 'c2',
           c3: 'c3',
           currentItem: 'c1' // 默认选中第一个组件
         };
       },
       methods: {
         //a标签调用的时候更改当前组件
         Change(Item) {
           this.currentItem = Item;
         }
       },
       components: { c1, c2, c3 }
     };
    </script>
    
    <style>
    </style>
    

    这样就可以实现动态切换组件了,如果不想用a标签,也可以用这个方法那其他的标签来完成。

    小弟初次学习vue,不懂的地方很多,如果表达有错误,请大家在评论指出。

    展开全文
  • 主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件webpack/themePlugin.js const ThemeColorReplacer = ...
  • 二、vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head>...
  • vue点击切换css样式

    2021-04-01 18:11:10
    vue动态点击切换css样式 <template> <div v-for="i in 5" class="el-personal" :class="{active:isActive==i}" @click="show(i)"> 切换css样式 </div> </template> <script>...

    vue动态点击切换css样式

    <template>
    	<div v-for="i in 5" 
             class="el-personal" 
             :class="{active:isActive==i}"
             @click="show(i)">
    		切换css样式
    	</div>
    </template>
    <script>
        export default {
        	data() {
    				return {
    					isActive: 0,
    				}
    			},
        	  methods: {
          		show(i) {
    				this.isActive = i
    				}
          		}
        	}
    </script>
    <style lang="scss" scoped>
        .el-personal{
            width:100px;
            height:100px;
            background:red;
        }
        .active{
            background:blue;
        }
    </style>
    
    展开全文
  • Vue+Less/Css简易动态切换主题描述解决方法less安装和使用 描述 最近在完成一个简易后台管理系统的搭建,因为功能模块比较少,于是写了一个设置页面,想给整个web添加一个改变颜色的功能(只是切换一种或几种颜色,...

    Vue+Less/Css简易动态切换主题

    描述

    最近在完成一个简易后台管理系统的搭建,因为功能模块比较少,于是写了一个设置页面,想给整个web添加一个改变颜色的功能(只是切换一种或几种颜色,自定义改变颜色的话难度会麻烦一些,可以参考下最下方的链接),于是了解了一下css变量和less变量,打算从这俩方面入手(预编译用的less)

    	//Css设置变量
    	:root{--global-color:blue;}
    	//调用变量
    	#box1{color:var(--global-color);}
    
    	//Less设置变量
    	@link-color: #428bca;
    	//调用变量
    	#box1{color:@link-color}
    }
    

    因为css中有十几行设置背景颜色的代码,每一行都要写var(- -xxx ),(为了省下一些字)于是选中了使用less变量。

    解决方法

    首先创建一个index.css
    (需要在main.js中声明import './styles/index.css',我的样式文件都存在styles中),然后写好两个不同的类,存放要原先颜色和改变之后的颜色。

    	//这里是css变量设置
    	.theme001 {
            --originColor: #FFCCCC;
            --darkColor: #ff6767a5;
        }
        .theme002 {
            --originColor: #83eeffd0;
            --darkColor: #42929f;
        }
    

    然后创建一个index.less
    (使用less需要先安装几个包和一些声明,在文章末尾)

    //导入index.css文件
    @import "index.css";
    //调用刚刚写好的css变量
    @origin-Color:var(--originColor);
    @dark-Color: var(--darkColor);
    @light-Color: var(--lightColor);
    

    最后切换的代码

    //*****blackmode是用于判断的布尔值*****
     modechaneg() {
          if (this.blackmode) {
            document.body.className = "theme001";
          }
          else {
            document.body.className = "theme002"
          }
    

    参考文章写的是

    document.getElementById('app').className = "theme001"
    //或者 document.getElementById('app').className = "theme001"
    

    原因是这样的,我使用了vue+elementUI,vue框架运行的时候都是基于<div id="app"> </div>,但是elementUI框架的一些弹出框是不在这个div内的,所以改变整个网页颜色的时候需要选中整个<body>
    (改elementUI的样式简直不要太折磨,后续再补充记录下)
    ,具体代码如下图

    在这里插入图片描述

    less安装和使用

    首先是安装依赖/包
    npm install less less-loader --save-dev
    安装完成在package.json中查看
    在这里插入图片描述
    然后在根目录下创建vue.config.js配置文件重新运行就可以使用less了,
    这样就不需要在每个.vue中单独引入@import "../styles/index.less";

    module.exports = {
        css: {
            loaderOptions: {
                less: {
                    globalVars: {
                        hack: `true; @import '~@/styles/index.less';`
                    }
                }
            }
        }
    };
    

    文章参考
    使用 css/less 动态更换主题色(换肤功能)
    vue less 切换主题(皮肤)

    展开全文
  • 欢迎使用tailwindcss访问Vue.js 3。 在不使用Vuex的情况下使用全局存储。 支持暗模式,带有开关图标。 组合:webpack,babel,postcss,打字稿,eslint。 项目设置 npm install 编译和热重装以进行开发 npm run ...
  • vue 动态切换皮肤和主题 篇三

    千次阅读 2019-09-17 11:40:08
    前面介绍了一种动态换肤的方法。主要是通过less-loader的less.modefyVar() 通过动态传参。动态修改less变量达到目的。 今天我们将采用另外一种存css的方式实现这种效果: 首先我们需要了解下css新的特征: var()...
  • 2.在项目创建一个 scss 样式文件, 项目中需要用到scss 所以安装了scss css预处理器。设置一个全局样式,效果如下 还要在vue.config.js设置一下来个loader 3. 在需要更换的颜色的地方 写上自己刚刚定义好变量的...
  • vue-antd动态切换主题

    2021-05-31 16:32:42
    安装依赖 1 webpack-theme-color-replacer: yarn add webpack-theme-color-replacer@1.3.22 ...在vue.config.js中加入配置 const createThemeColorReplacerPlugin = require("./plugin.config"); const vueConfig
  • ant-design-vue实现动态切换主题色

    千次阅读 2021-03-29 14:12:13
    1、“ant-design-vue” 不限版本 注意:ant-design-vue是基于babel-plugin-import按需引入的,在根目录下建了babel.config.js内容如下 module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], ...
  • 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白,如有不对的地方轻喷,只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
  • vuecss共用问题

    2021-03-29 16:38:30
    当进行切换时代码css文件并没有清楚,所以导致css重用 提示:这里填写问题的分析: 解决方案: 修改css名是最简单的方案,当然后续会去查阅如何能够做到退出时将其加载文件全部刷新的问题 提示:这里填写该问题的...
  • 往常的项目开发,样式都是默认写在每个页面的...有一个问题就是,在切换页面时,会加载很多当前页面不需要的css文件,所以在每个页面创建link标签挂载前,将之前所创建的所有link标签(有id标记的)删除掉。 有问题欢...
  • 在开发前端页面的时候, 如何动态切换元素的css?主要有一下几种方式: 1.style内联单个或者少量属性动态切换 :style=" markRed==true?'background-color:#F00;':'background-color:#00ff40;' " Test.vue &...
  • 而因为中英文字在同一种字体下可能会导致页面布局,效果等的不同,因此实际上在不想页面reload的前提下,我们需要实现动态加载不同css文件动态加载不同css文件 因为预加载的原因,通过判断使用import(url)这种...
  • 其次在点击修改(相当于按钮样式切换的笨方法) deviceEnableOrDisable(value) { if (value == 0) { this.$refs.abc.style.background = "#52c41a"; this.$refs.abc.style.color = "#fff"; this.$refs.abc1.style....
  • 现有的 Vue 不是通过 :style 的方式定义去动态绑定 CSS,那 CSS 变量和这种方式有什么区别? Vue 3 做了哪些操作,让 SFC (单文件组件)能更好的使用 CSS 变量 以下对这些问题进行探讨 CSS 变量基础 CS.
  • 在我们创建的vue项目中,为了使...①在main.js中加入@import '../static/css/reset.css'(main.js 是我们的入口文件,主要作用是初始化vue实例并使用需要的插件;App.vue是我们的主组件,所有页面都是在App.vue下...
  • Vue img src 动态切换的一个解决方案

    千次阅读 2019-11-06 19:21:05
    Vue img src 动态切换的一个解决方案 在Vue 中,如果img 的src 为动态切换的话, 会出现图片无法加载的情况。 网上已经有了很多讨论,在解决这个问题, 基本上都是大同小异。 这里记录一下自己的解决方案,可能会和...
  • vue[css换肤功能的多种实现方式]

    千次阅读 2020-01-16 15:20:22
    准备多套CSS样式,利用link标签的ref切换(简单 - 按需加载主题,但是管理配置没1方便) 使用CSS预处理器(如:scss)生成多套主题样式(复杂 - webpack打包处理) CSS3的变量功能生成多套主题样式(...
  • 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules。那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末。本文将从 什么是CSS Modules、 CSS Modules诞生的原因、 怎样使用...
  • 记录一下基于vue和less的项目是咋切换主题的。这个方法适用于已经在代码里到处都是less全局变量或mixins,想让每个变量在不同主题下有不同的值的情况。不兼容ie 就以一个颜色举例:假设我已经在项目里使用了很多次@...
  • 想要实现的功能:页面渲染前,从后端获取用户的数据,用户数据内含有style值,根据不同的style值动态改变商城的颜色风格。 原本我是只考虑了两个风格,然后在每个页面里做判断,后来考虑到后期可能会添加其他风格,...
  • 2、在main.js文件中引入  import VueI18n from 'vue-i18n';  Vue.use(VueI18n);  const i18n = new VueI18n({  locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地,当下次使用时...
  • Vue.js动态改变样式

    千次阅读 2021-07-27 14:11:45
    但是我们知道js只能控制DOM层和BOM层,没有办法控制写入CSS文件。可是我们有时候偏偏需要改变样式怎么办呢?我们有两种方法: 动态改变style属性值 动态切换class类名 嗯嗯,没错。虽然我们不能用js直接操作css...
  • webpack一步步实现打包、实时打包操作、打包css\less\scss文件 我们接着这篇博客,来继续学习webpack的相关操作 我先贴出来项目的目录结构: 打包图片 通过npm i url-loader file-loader -D 安装 在images、images...
  • Vue + Scss 动态切换主题颜色实现换肤

    千次阅读 2020-05-26 11:05:00
    Vue + Scss 动态切换主题颜色实现换肤一、首先需要给项目下载配置Scss二、在vue项目全局中引入scss三、准备工作已经做完准备开干 根据预设的配色方案,在前端实现动态切换系统主题颜色。 大概的思路就是给html根标签...
  • Vue 换肤的示例实践

    2020-11-27 21:18:49
    最近公司做的项目得到一个网站换肤的需求,也就是切换主题。那么如何切换主题色呢?...在 static 目录下新建一个 theme.css 文件,将需要替换的 CSS 声明在此文件中 .side-bar { background: linear-gradient(#B7

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,359
精华内容 7,343
关键字:

vue动态切换css文件

vue 订阅