精华内容
下载资源
问答
  • vue改变样式
    2021-04-29 23:27:25

    通过给html元素的class属性绑定vue中的属性值,得到样式的动态绑定。
    传统的class=“样式”,通过v-bind:class="{样式:布尔值}"(布尔值=true显示反,false不显示),再通过将布尔值设置成vue中的属性值就可以实现动态绑定了。

    例子如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div01{
                width: 400px;
                height: 200px;
                background-color: beige;
            }
    
            .red{
                background-color: red;
            }
    
            .green{
                background-color: green;
            }
    
            .blue{
                background-color: blue;
            }
    
    
        </style>
    </head>
    <body>
        <div id="app">
    
            <div v-bind:class="{red:temp}" class="div01"></div>
            <div :class="mychange" class="div01"></div>
            <div class="div01"></div>
    
            <br>
    
            <button type="button" v-on:click="change()">改变样式</button>
    
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    
        new Vue({
            el:"#app",
            data:{
                temp:false
            },
            methods:{
                change:function(){
                    this.temp = !this.temp;
                }
            },
            computed:{
                mychange:function(){
                    return {
                        green:this.temp
                    }
                }
            }
        })
    
    </script>
    </html>
    
    更多相关内容
  • vue修改样式不成功

    千次阅读 2019-07-08 08:40:10
    style 中 scoped 会使 修改样式 不成功 <style scoped lang="scss"> @import "../../assets/scss/multipleTest.scss"; .multiple-div { display: flex; height: 100%; flex-direction: column; // ...
    1. style 中 scoped 会使 修改的样式 不成功
    <style scoped  lang="scss">
    @import "../../assets/scss/multipleTest.scss";
    .multiple-div {
      display: flex;
      height: 100%;
      flex-direction: column;
      // height: 100vh;
      padding: 0 0 0 20px;
      span {
        margin-top: 16px;
        font-size: 24px;
        text-align: left;
      }
    
      .multiple-a-tabs {
        text-align: left;
      }
       .ant-tabs-bar {
       display: flex;
       justify-content: space-between
      }
     
    }
    
    </style>
    
    

    在这里插入图片描述

    2.如果去掉 scoped 会使 修改的样式成功,但是也会导致其他页面的样式变化

    在这里插入图片描述

    3.使用 /deep/ 完美解决

    <style scoped  lang="scss">
    @import "../../assets/scss/multipleTest.scss";
    .multiple-div {
      display: flex;
      height: 100%;
      flex-direction: column;
      // height: 100vh;
      padding: 0 0 0 20px;
      span {
        margin-top: 16px;
        font-size: 24px;
        text-align: left;
      }
    
      .multiple-a-tabs {
        text-align: left;
      }
     /deep/  .ant-tabs-bar {
       display: flex;
       justify-content: space-between
      }
     
    }
    
    </style>
    

    在这里插入图片描述

    展开全文
  • vue修改元素样式

    万次阅读 2019-08-15 18:45:05
    vue通过js动态修改元素的样式,如果是固定的几个样式,我常用的是绑定元素的calss,给不同的class写好需要的样式,js控制是否使用这个class。 但是最近遇到这么一个需求,文字可以让用户通过取色器选择不同的颜色,...

    vue通过js动态修改元素的样式,如果是固定的几个样式,我常用的是绑定元素的calss,给不同的class写好需要的样式,js控制是否使用这个class。

    但是最近遇到这么一个需求,文字可以让用户通过取色器选择不同的颜色,选择颜色后动态更新展示文字效果。
    实现效果

    这样获取到的颜色是一个很庞大的数据,根本不可能提前写好,也就是不能通过class的方式处理。那么怎样直接修改元素的style属性呢?

    方法1—vue的v-bind指令

    其实vue提供了绑定style属性的方法,并且和绑定class是写在一起的,但是,这么久以来我竟然一点印象也没有,也是很不可思议的一件事了。
    这里给上vue绑定style的文档地址:https://cn.vuejs.org/v2/guide/class-and-style.html#对象语法-1
    具体使用:

    <template>
    ... 省略 ...
    <el-row>
      <el-col :span="12">
        <el-form-item label="模板标题:" prop="titleName">
          <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
          </el-input>
        </el-form-item>
        
        <el-form-item label="标题颜色:">
          <!-- 取色器插件 -->
          <colorPicker v-model="titleColor"></colorPicker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="内容示例:" prop="" >
          <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
            <!-- v-bind缩写为":" -->
            <div :style="{color: titleColor}">{{searchForm.titleName}}</div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    ... 省略 ...
    </template>
    
    <script>
    export default {
      data: () => {
        return {
          titleColor:'#000000',
          searchForm: {
            titleName: ''
          }
        }
      },
      methods: {}
    }
    </script>
    

    使用v-bind绑定元素的style属性,js中连methods的部分都不用写了

    方法2—js原生获取元素

    这里的取色器插件可以绑定change事件,那么我们可以在取色器改变的时候取设置元素的style。
    我首先想到的就是js原生的方法
    具体使用:

    <template>
    ... 省略 ...
    <el-row>
      <el-col :span="12">
        <el-form-item label="模板标题:" prop="titleName">
          <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
          </el-input>
        </el-form-item>
        
        <el-form-item label="标题颜色:">
          <!-- 取色器绑定change事件 -->
          <colorPicker v-model="titleColor" @change="changeColor"></colorPicker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="内容示例:" prop="" >
          <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
            <!-- 给元素添加class,也可用id -->
            <div class="title-color">{{searchForm.titleName}}</div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    ... 省略 ...
    </template>
    
    <script>
    export default {
      data: () => {
        return {
          titleColor:'#000000',
          searchForm: {
            titleName: ''
          }
        }
      },
      methods: {
        changeColor (val) {
          // 1. 这个取色器change事件直接获取的就是带"#"的十六进制颜色
          // 2. 如果用的是id,这里就换成js获取id的方法;如果vue中引入了jQuery,这里也可以用jQuery的方法
           document.getElementsByClassName('title-color')[0].style.color = val	
        }
      }
    }
    </script>
    

    方法3 — vue的$refs属性获取元素

    和方法2一样,通过取色器的change事件获取修改的颜色,但是在获取元素的时候不用原生而用vue的实例属性$refs。
    vue 文档中提到,当ref在普通的DOM元素上使用,引用指向的就是DOM元素,因此我们可以用这点来获取我们要的元素。

    vue $refs的文档:https://cn.vuejs.org/v2/api/#vm-refs
    vue ref的文档:https://cn.vuejs.org/v2/api/#ref
    具体使用:

    <template>
    ... 省略 ...
    <el-row>
      <el-col :span="12">
        <el-form-item label="模板标题:" prop="titleName">
          <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
          </el-input>
        </el-form-item>
        
        <el-form-item label="标题颜色:">
          <colorPicker v-model="titleColor" @change="changeColor"></colorPicker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="内容示例:" prop="" >
          <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
            <!-- 使用ref给元素注册引用信息 -->
            <div ref="titleNameRef">{{searchForm.titleName}}</div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    ... 省略 ...
    </template>
    
    <script>
    export default {
      data: () => {
        return {
          titleColor:'#000000',
          searchForm: {
            titleName: ''
          }
        }
      },
      methods: {
        changeColor (val) {
          // 通过$ref来获取
          this.$refs.titleNameRef.style.color = val	
        }
      }
    }
    </script>
    
    展开全文
  • 本篇文章主要介绍了Vue获取DOM元素样式样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 比如: <style scoped> .example { color: red; } </style> ...
  • 主要介绍了vue修改Element的el-table样式的4种方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
  • 修改vue组件中的样式

    千次阅读 2020-01-19 10:57:54
    使用VUE组件时,有时候我们会修改组件的样式,比如修改颜色的等 最近项目使用react发现,react的组件可以在父组件里面修改样式vue文档里面是这样说的(Scoped CSS规范是Web组件产生不污染其他组件,也不被其他...

    使用VUE组件时,有时候我们会修改组件的样式,比如修改颜色的等

    最近项目使用react发现,react的组件可以在父组件里面修改其样式,vue文档里面是这样说的(Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。),所以当修改vue组件样式就需要用以下方法了

    1、混合使用全局属性和局部属性

    <style>
    /* global styles */
    </style>
    
    <style scoped>
    /* local styles */
    </style>
    

    修改组件的样式写在 /* global styles */ 里面,缺点就是样式变成全局样式,会修改整个项目里面的样式 ,
    优化后方法

    <style scoped>
    /* local styles */
    .example {
      color: red;
    }
    </style>
    <style>
    	/* global styles */
    	.header > div{
    	  color: red;
    	}
    </style>
    <template>
      <div class="example">
    	<Header class=‘header’></Header>	
      </div>
    </template>
    

    给组件一个class ,然后通过修改class里面的样式修改全局样式,减少全局样式污染

    2、深选择器

    如果想对设置了scoped的子组件里的元素进行控制可以使用 ’>>>’ 或者 ’deep’

    <template>
      <div id="app">
        <Header></Header>
      </div>
    </template>
    
    <style lang="css" scoped>
      .Header /deep/ .name{ //第一种写法
        color:red;
      }
      .Header >>> .name{   //二种写法
        color:red;
      }
    </style>
    
    <div class="Header">
      <div class="name"></div>
    </div>
    

    一些预处理程序,例如sass不能解析>>>属性,这种情况下可以用deep,它是>>>的别名,工作原理相同。

    快过年了,还在上班,看着别人都回去了,老板不给请假,心里一万个草泥马跑过。。。。。。。。。。
    在这里插入图片描述

    展开全文
  • Vue动态改变样式实战

    千次阅读 2020-08-30 10:24:14
    一点睛 1通过给html元素的 class属性绑定...二vue动态改变样式 1代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue动态改变样式</title> <s...
  • 下面小编就为大家分享一篇vue中element组件样式修改无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 步骤1:安装less / less-loader 依赖 ...webpack@4: 修改 webpack.config.js 文件: // webpack.config.js module.exports = { rules: [{ test: /.less$/, use: [{ loader: 'style-loader', }, { loader: '
  • vue导出excel并修改表头样式(请先阅读readme) 安装npm install 执行npm run serve
  • vue ref修改样式

    千次阅读 2021-01-22 16:41:17
    this.$refs[pri][0].setAttribute("class", " animated printbox animated_mar"); 主要用到setAttribut方法
  • vue更改组件样式

    2022-05-07 10:30:45
    更改组件样式
  • Ruoyi-vue控件样式修改

    2021-11-02 14:53:51
    CSS文件的目录:G:\Download\RuoYi-Vue-master\ruoyi-ui\src\assets\styles 前端view文件主要修改:index.scss 方法:前端页面点开后,按F12,在调试模式栏里,查找到要修改的元素的元素名称和class。 然后再对应...
  • vue-antd改变样式

    2021-05-07 12:08:23
    vue-antd使用1 antd中如何改变样式 使用:global改变 改变ant.css 全局文件中改变ant.css
  • 主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Antd Vue组件样式修改 百分百有效 a-modal组件 <a-modal :visible="true" title="aa" okText="同意" wrapClassName="aa" cancelText="tuichu" @ok="()=>{}"> <a href="#">全部订单</a> </a-...
  • 下面小编就为大家分享一篇vue里面父组件修改子组件样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 【CSS】VUE样式修改不生效

    千次阅读 2019-05-10 16:41:00
    修改了Element UI中table组件的tooltip样式,但是不生效。 原因是使用了<stylescoped></style>,多了个scoped导致的。 原因参见:https://www.jb51.net/article/121603.htm ...
  • 使用 vue 动态为元素生成样式, css 趣味样式生成, 样式实时生成, 可自行更改css样式改成自己想要的效果
  • 我的做法是使用一个块元素来包裹住组件,例如 <div ref="yourModal"> 最关键的一句就是下面这行代码 :getContainer="() => $refs.yourModal" > </a-modal> </div> 这样的话就可以根据class名对元素进行修改 如果还...
  • Vue动态改变样式的5种方法

    千次阅读 2021-12-23 23:01:15
    1 第一种方法 <div :class= "{'active':isActive}" > 文字</div> 2 第二种方法 <div class="activeOne" :class= "{activeTwo:isActive,'activeThree': hasError}" > 文字<...
  • Vue body样式修改

    2021-11-12 16:55:59
    解决方式,通过beforeCreate函数设置App.vue中body的样式 export default { beforeCreate() { document.querySelector('body').setAttribute('style', 'margin:0;') }, } 可以明显看出,外边距已经没有了,over
  • vue修改内联样式

    2020-08-20 18:01:50
    Vue修改内联样式 在这之前由于使用vue较少,在使用vue开发的时候还按着js的那一套来,在写网站的时候遇到一个问题需要修改内联样式。 在vue中常规方法 方法名.style.属性名来修改内联样式并不起作用,而需要利用vue...
  • 今天小编就为大家分享一篇Vue2.0点击切换类名改变样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue自定义switch开关组件,实现样式可自行更改,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue 组件中添加样式不生效的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue修改vant自带的样式_@jie

    千次阅读 2020-08-24 22:37:15
    今天用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式修改CSS样式还是无效。 css一般都会使用sass或者less,加了scoped后修改样式不起作用,即使加了important也没用。 在vue项目中,当style...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,290
精华内容 25,716
关键字:

vue更改样式

友情链接: SciDrv.rar