精华内容
下载资源
问答
  • vue修改css样式属性
    2021-08-16 14:00:20

    修改css不生效 使用 !important也不生效时 使用 /deep/

    /deep/#qrcode{

            width:200px;

    }

    更多相关内容
  • vue使用v-bind绑定style属性或class属性,动态修改CSS样式。动态修改style,动态修改class。

    目录

    前情提要

    总结

    修改class属性总结

    修改style属性总结

    修改class属性

    修改style属性

    整活时间,超级变变变


    前情提要

    需求:根据data某些属性,动态修改某个节点的样式或者class

    1、首先很重要的一点是 v-bind: 引号内的是JS表达式而不是单纯一个值或者字符串,判断时候使用的是truthy真值,而不是布尔值,大白话就是会进行类型转换。就当成你在script标签中写的JS就行了(注意区分JS表达式和JS代码)

    • JS表达式:产生一个值,可以放在任何需要值的地方,用处非常大,如三目表达式、1+'2'、Math.max(a,b)、vue里的有返回值的methods,computed,props里的属性等等
    • JS代码(语句): 如if(x>1){.......}

    2、另一点是,你需要保证动态的变量被vue所管理,能监听到变化,深入响应式原理 — Vue.js

    这样节点才会重新渲染。

    PS:动态修改class或Style不会和原生的属性冲突,效果是加法,你可以静态和动态都写。

    总结

    老样子,上来先给出总结,来自于vue官网Class 与 Style 绑定 — Vue.js的变通

    修改class属性总结

    <div :class="isSquare?'square':'circular'"></div>
    
    <div :class="[isChange?'blue':'red',isSquare?'square':'circular']"></div>
    
    <div :class="{'square':isSquare,'square-color':isColor}"></div>

    修改style属性总结

    <div class="square" :style="{'background-color':isChange?'blue':'red',
    'color':isChange?'white':'black'}">测试</div>
    
    <div class="square" :style="{'height':data_height+'px',
    'width':data_width+'px'}">测试</div>
    

    总结只是让会的人勾起回忆的,如果刚接触,或者想看更多变式,请看下面详解。

    特别注意: 注意属性必带的双引号""已经被使用了,所以双引号内表示字符串只能使用单引号' ',否则会出现匹配冲突。

    修改class属性

    1、利用JS表达式提供一个字符串

    <!--HTML部分 -->
    <div :class="isSquare?'square':'circular'"></div>
    
    <!--isSquare真值为真,等同于-->
    <div class="square"></div>
    
    <!--isSquare真值为假,等同于-->
    <div class="circular"></div>

    这种方法用得比较多,你可以变化着JS表达式的内容,你会发生最后的行为和原生的操作没有太大的区别,易读性比较好。

    如果需要多个,则变为数组(这种行为不太规范,也有点怪,推荐使用下面vue的官方方法)

    <div :class="[isChange?'blue':'red',isSquare?'square':'circular']"></div>
    

    2、vue提供的对象方法

    通过真值判断是否应用这个class,注意尽量不要用对象键名的简写否则容易出错,观察也不便。如果键名中有短横线'-'则必须使用完整字符串形式, {'hello-class':'hello'}。

    <!--HTML部分 -->
    <div class="hello" :class="{'square':isSquare,'square-color':isColor}"></div>
    
    <!--此时isSquare和isColor真值为真,等同于-->
    <div class="hello square square-color"></div>
    
    //data部分
    data:{
       isSquare:true,
       isColor:1
    }

    还有一点,不要忘了对象的键值也是一个JS表达式,也就是说你可以这样写

    <!--HTML部分 -->
    <div class="hello" :class="{'square':isSquare="是方的"?1:false,
    'square-color':isColor}"></div>
    
    <!--此时isSquare和isColor真值为真,等同于-->
    <div class="hello square square-color"></div>
    //data部分
    data:{
       isSquare:'是方的',
       isColor:1
    }

    是不是让人眼前一黑

    3、数组对象写法

    其实还有一个数组里包对象的,但其实多个class名,一个对象就能完成的,数组里套对象,好像有点脱裤子放屁,看你们要怎么使用吧。

    <!--HTML部分 -->
    <div class="hello" :class="[{'square':isSquare},
    {'square-color':isColor}]"></div>
    
    <!--此时isSquare和isColor真值为真,等同于-->
    <div class="hello square square-color"></div>

    JS表达式目的是提供一个值,也就是说你可以把这个值当成data里的变量,意味着你也可以整个对象/数组写在data里。

    <!--HTML部分 -->
    <div :class="divObject"></div>
    //data部分
    data:{
       divObject:{
        'hello':true,
        'isSquare':true
       }
    }

    是不是特别简单

    只要是JS表达式的变式后面就不再展示了,请自行变通。

    修改style属性

    1、对象的写法(最推荐、最舒服的)

    <!--HTML部分 -->
    <div class="square" :style="{'background-color':isChange?'blue':'red',
    'color':isChange?'white':'black'}">测试</div>
    

    附上vscode截图 因为csdn的代码块实在不怎么好看出来哪些是动态的变量

    77d35d6160084183a5826bdc588e4357.png

    vscode截图

    注意,CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,要用引号括起来) 

    所以以下同等效果,同时三目运算符后的字符串也能换成data中的数据。

    <!--HTML部分 -->
    <div class="square" :style="{backgroundColor:isChange?color_active:color_disactive,
    color:isChange?textColor_active:textColor_disactive}">测试</div>
    

    1b0d0c5d5cff431fb73de4deb92d65bf.png

    vscode截图

    //date部分
    data:{
       isChange:false,
       color_active:'blue',
       color_disactive:'red',
       textColor_active:'white',
       textColor_disactive:'black'
     }

    2、数组对象写法

    同样的,和class一样,有数组包对象的写法。

    <!--HTML部分 -->
    <div class="square" :style="[{'background-color':isChange?'blue':'red'},
    {'color':isChange?'blue','red'}]"></div>
    
    //date部分
    data:{
       isChange:false,
       color_active:'blue',
       color_disactive:'red'
     }

    当然,你一样可以利用JS表达式将对应的对象写在data里,这样属性多时候简洁一些,修改也可以直接修改对象里的属性。这样使用JS修改某个Style属性,区别于直接修改一整个class。

    整活时间,超级变变变

    看完上面,大家会发现,咦?style属性为什么没有直接提供一个字符串呢,当然有。

    <div class="container" :style="isSquare?'background-color:'blue'':''"></div>

    哒哒哒,写完,好了,匹配错误!记得我们开头说过的吗,引号匹配的问题。此时无论双引号还是单引号都不能表达这个blue的字符串。而且这也写指定样式很不方便。

    那这怎么办呢,这时候,模板字符串就派出用场了。模板字符串最后会解析成字符串,所以这也能当做一个JS表达式。

    <div class="container" :style="`background-color:${isChange?'pink':'orange'}`"></div>
    <!-- 或者这样 -->
    <div class="container" :style="'background-color:'+`${isChange?'pink':'orange'}`"></div>

    模板字符串中的插值语法${}和vue标签里的插值语法{{}}一样也是一种JS表达式,也就是开始套娃了。

    所以多个属性时,可以使用模板字符串,因为使用了对象,所以需要注意冒号的写法不能包括在字符串里。

    <div class="container" :style="{'background-color':`${isChange?'yellow':'green'}`,
    'border-radius':`${isSquare?'50%':'0'}`}"></div>

    以上的代码在某些语法检查中会提示错误导致下面的代码没有代码提示,不建议使用,但是不影响执行。

    时间差不多,先分享到这,以后想起什么再继续写。手动码字不容易求个点赞,如有错,自己修改即可。

    展开全文
  • Vue · 对css样式修改

    千次阅读 2021-07-23 18:46:20
    style样式动态绑定 方法一: (1) html中: (2) data中: videoBox:{ width:800, height:500, } (3)mounted中: mounted() { this.videoBox.width=this.refs.videoMa.offsetWidth;this.videoBox.height=this....

    方法一:

    html:

     <div class="videoMa" ref="videoMa" style="width:100%;height:100%;">
     	<div id="playWnd" class="playWnd"  :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"></div>
     </div>
    

    data:

     videoBox:{
           width:800,
           height:500,
         }
    

    mounted中:

      mounted() {
          this.videoBox.width=this.$refs.videoMa.offsetWidth;
          this.videoBox.height=this.$refs.videoMa.offsetHeight;
     }
    

    方法二:

    <div id="vueFirst">
        <div :class="backColor">hello world</div>
        <hr>
        <input type="button" value="变黄" @click="changeColorToYellow"></input>
        <input type="button" value="变蓝" @click="changeColorToBlue"></input>
    </div>
    <script type="text/javascript">
    export default {
           data: {
               backColor: "blueBack"
           },
           methods: {
               changeColorToYellow() {
                   this.backColor = "yellowBack"
               },
               changeColorToBlue() {
                   this.backColor = "blueBack"
               }
           }
        }
    </script>
     <style>
     .blueBack {
         background-color: blue;
     }
    
     .yellowBack {
         background-color: yellow;
     }
    </style>
    
    展开全文
  • vue 绑定属性设置css样式

    千次阅读 2019-07-23 17:52:31
  • Vue中动态使用JavaScript修改CSS样式

    千次阅读 2022-06-27 21:46:40
    因为我们难以使用行内属性来设置ElementUI组件内的div,比如说我们想要修改el-slider组件中的button大小一般都是使用css样式来进行设置。那么我们应该怎么做呢?
  • 怎么修改vue里面elememtUI的css样式

    千次阅读 2020-12-23 05:33:12
    第一种把上面的scoped去掉优点: 修改简便缺点: 把scoped去掉了,就变成全局css了,可能会影响其他组件2. 第二种就是去 node_modules裡面把 element-ui 整包 CSS 给抓出来,然后放到自己指定的路径!这是 element-ui...
  • 当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们动态修改的值为负数的时候 <view :style="[{ 'margin-top':'-'+ height...
  • 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。 vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 比如: <style scoped&...
  • Vue在渲染DOM后会在DOM节点上生成一个随机串data属性,这一属性给了当前组件下的DOM一种唯一标识。 当在style标签中加入scoped属性后,在页面渲染完毕后,style下所有的CSS都会自动转换,在过滤器上添加与DOM相同的...
  • 通过ref修改 <div class="sub" ref="abc" @click="submit()">确定</div> submit() { if (!this.password) {//我写的判断 this.$refs.abc.style.background = "#ccc"; } else { this.$refs.abc....
  • vue中子组件css样式不生效

    千次阅读 2022-06-27 12:10:48
    vue的子组件样式不生效,深度选择器
  • 在网页开发中,我们经常会遇到动态的改变某个元素样式的需求,在vue里如何实现呢?官网上其实写的很详细了,对象语法,数组语法等。我自己总结了在开发中,个人用的比较多的三种方式1.class,三元表达式根据三元...
  • 1.直接在元素上通过:style的形式,书写样式对象 这是一个H1 2.将样式对象定义在data中,...2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 这是一个H1 3.在:style中通过数组,引用多个data上的样式对象 1:
  • VUE中使用ref修改css属性之borderBottom

    千次阅读 2021-03-22 11:10:00
    <li ref="borderBottom"> <a href="javascript:;">我的资料</a> </li> <li ref="borderBottom1">|</li> <li ref="borderBottom2"> <a href="javascript:;......
  • vue修改css属性无效

    千次阅读 2019-10-30 18:03:57
    vue修改css属性无效,img设置的宽度无效,p设置的颜色有效 <template> <div> <carousel></carousel> <p> 555555</p> </div> </template>...
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个v-bing:class="{...
  • vue修改元素样式

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

    千次阅读 2021-11-16 21:05:05
    标签有scoped属性时,它的 CSS 只作用于当前组件中的元素,此时就需要用到样式穿透 如何使用深度选择器? 在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。>>>可能存在问题,建议.....
  • 项目前端使用vue.js和element-ui,由于想要对输入框进行验证,输入值非法时输入框颜色变红,就想要根据el-input编译 后的class进行修改,但是直接在html页面中调用class无效,在网上查资料后,发现把html中的<...
  • .vue文件怎么写css样式

    千次阅读 2021-01-11 20:40:02
    .vue文件怎么请求api.vue文件怎么请求api1、首先我们安装axios网络请求库cdtest//进入项目根目录 npmiaxios-S//执行安装2、在需要使用请求的vue组件内,引入axios 请求示例 //引.vue文件怎么引入本地图片.vue文件...
  • vuecss样式管理

    万次阅读 2019-02-21 17:44:45
    在每个CSS选择器末尾(编译后生成的CSS)加一个当前组件的data属性选择器(如[data-v-7ba5bd90])来私有化样式。选择器末尾的data属性和其对应的DOM中的data属性相匹配 子组件的元素上有一个类已经在这个父组件中...
  • Vue 动态改变css

    千次阅读 2022-03-16 16:17:33
    两种方式动态改变css
  • vue中引入了scoped这个概念,设计思想就是让当前组件的样式不会修改到其他页面的样式,使用了data-v-hash的方式来使css有了他对应的模块的标识,通俗来说就是使用了scoped属性,template里面的ht
  • 本人是前端的初学者,也在自学Vue.js,在自己编写系统的过程遇到的小问题,在这里分享给大家,若有什么不对的地方还请各位指正喔(づ ̄ 3 ̄)づ 一、效果 二、前端代码 这是静态页面代码部分(就两个简单的按钮...
  • 解决方案:注释掉 css里面的属性extract vue cli3.0 下 ,样式无法热更新的问题
  • 怎么用vue修改样式

    2022-05-18 13:16:38
    css <style> .ok{ padding: 10px; background-color: green; color: white; } .err{ padding: 10px; background-color: red; color: #fff; } </style
  • 修改vue中App.vueCSS

    2021-11-06 17:26:27
    <style> #app { /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* text-align: center; ...
  • 我就废话不多说了,大家还是直接看代码吧~{{ msg }}export default {data() {return {msg: "Welcome to Your Vue.js App",};},computed: {getClientHeight:function () {//屏幕可视区域的高度let clientHeight = ...
  • vue中动态修改css其中一个属性

    万次阅读 2019-01-04 17:03:28
    msg: "Welcome to Your Vue.js App", }; }, computed: { getClientHeight:function () { //屏幕可视区域的高度 let clientHeight = document.documentElement.clientHeight + "px" console.log(...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,394
精华内容 10,557
关键字:

vue修改css样式属性