精华内容
下载资源
问答
  • vue动态设置style
    千次阅读
    2021-05-24 10:30:56
    • 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize
    • 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff

         对象

    • html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

    • html :style="{display:(activeName=='first'?'flex':'none')}"

         数组

         html :style="[baseStyles, overridingStyles]"

         html :style="[{display:(activeName=='first'?'flex':'none')},{fontSize:'20px'}]"

        三目运算符

        html :style="{color:(index==0?conFontColor:'#ddd')}"

        html :style="[{color:(index==0?conFontColor:'#ddd')},{fontSize:'22px'}]"

       多重值

        此时,浏览器会根据运行支持情况进行选择

       html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

     

    更多相关内容
  • Vue动态设置Style属性

    万次阅读 2021-09-30 20:38:31
    凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 对象 ...

     Vue动态设置Style属性_fuzhongbin的博客-CSDN博客_vue 动态style

     :style="{ color:domain.groups == 1? '#ccc': domain.groups == 2 ? '#ccc' : '' }"

    凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize
    除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff
         对象
    html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
    
    html :style="{display:(activeName=='first'?'flex':'none')}"
    
         数组
         html :style="[baseStyles, overridingStyles]"
    
         html :style="[{display:(activeName=='first'?'flex':'none')},{fontSize:'20px'}]"
    
        三目运算符
        html :style="{color:(index==0?conFontColor:'#ddd')}"
    
        html :style="[{color:(index==0?conFontColor:'#ddd')},{fontSize:'22px'}]"
    
       多重值
        此时,浏览器会根据运行支持情况进行选择
    
       html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"
     

    展开全文
  • vue动态设置style属性修改背景图片

    万次阅读 2020-01-17 14:55:29
    原始class属性设置背景样式 .bannerP { position: absolute; top: 0; left: 2.96rem; right: 0; bottom: 0; background: url(../../assets/img/backgroundp.jpg) no-repeat center; // 本地静态图片...

    原始class属性设置背景样式

    
      .bannerP {
        position: absolute;
        top: 0;
        left: 2.96rem;
        right: 0;
        bottom: 0;
        background: url(../../assets/img/backgroundp.jpg) no-repeat center;   //  本地静态图片路径
        background-size: cover;
      }

    通过JavaScript实现动态修改背景图片

    首先html中设置style为 动态绑定 即 :style

     <div :class=" $store.state.isMobile?'bannerH':'bannerP'" ref="backGroundRef" :style="bacImage">
        </div>

    在JavaScript方法中则可以通过修改绑定bacImage实现动态更换背景属性。 

     mounted () {
                let imageName = 'mobile' //手机终端
                //  通过浏览器判断终端为手机(true) 或者 pc(false) 动态切换背景图片
                if (!this.$store.state.isMobile) {
                    imageName = 'web'  // pc 浏览器
                    this.bacImage = {backgroundImage: 'url("https://rdet-oss-test.oss-cn-hangzhou.aliyuncs.com/admin/static/image/loginBackground.gif")'}
                }
                else {
                    this.bacImage = {backgroundImage: 'url("https://rdet-oss-test.oss-cn-hangzhou.aliyuncs.com/admin/static/image/web_background.jpg")'}
                }
    
            },

     

    展开全文
  • vue动态绑定style样式之动态添加style样式的多种写法

    项目中会需要动态添加 style 行内样式,现指出常用的几种方式。

    注意:

    1、凡是有 - 的style属性名都要变成驼峰式,比如font-size要变成fontSize。

    2、除了绑定值,其他的属性名的值要用引号括起来,比如fontSize:'14px'而不是 fontSize:14px。

    对象形式

    //html
    <div :style="{ color: '#333', fontSize: '14px' }"></div>

    数组形式

    //html
    <div :style="[baseStyles, overridingStyles]"></div>
    
    data(){
      return {
    	baseStyles: {
    	  width: '100px',
    	  height: '100px'
    	},
    	overridingStyles: {
    	  background: 'red',
    	  height: '200px'
    	}
      }
    }
    

    三目运算符形式

    //html
    <div :style="{background:index===0 ? '#FFFFFF' : '#000000'}"></div>
    
    <div :style="[{color:index==0 ?'#333':'#000'},{fontSize:'14px'}]"></div>

    绑定计算属性

    //html
    <div :style="setIconStyle"></div>
    
    computed:{
    //动态设置样式
    etIconStyle() {
     return 'color: #333; fontSize: 14px'
     }
    }

    通过条件绑定样式

    //html
    <div :style="setIconStyle(index)"></div>
    
    computed:{
    //动态设置样式
    etIconStyle() {
     return function (index) {
    	return index===0 ? 'color: #333' : 'color: #000'
      }
     }
    }

    多重值(浏览器会根据运行支持情况进行选择)

    //html
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

    展开全文
  • vue动态添加style样式的几种写法

    万次阅读 2021-12-09 10:12:59
    在长期维护的项目里面,尽量要...凡是有 - 的style属性名都要变成驼峰式,比如font-size要变成fontSize;除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff。
  • vue动态设置class、动态设置style

    千次阅读 2022-01-16 18:42:28
    //动态style对象 <div :style="{ color: bgColor, fontSize: '18px' }"></div> //动态class数组 <div :class="['is-active', isRed ? 'red' : '' ]"></div> //动态style数组 &l
  • vue动态添加style的样式

    千次阅读 2020-04-20 19:06:12
    vue动态添加style样式的时候,有以下注意点 1.凡是有-的style属性名都要变成驼峰式,比如font-weight,需要写成fontWeight 2.除了绑定值,其他属性名的值要用引号括起来,比如width:‘75px’,不要忘记引号 3.动态...
  • vue 动态设置style>的属性

    千次阅读 2022-03-19 10:46:51
    有的时候需要设置style中的属性,但又不想总是行内的绑定,所以希望能设置个变量来替代style中的值。 具体办法: 1.定义ref在div标签中,ref要定义在需要修改class属性的标签上。 2.在style中定义变量--bgColor。...
  • vue动态style设置背景图片

    千次阅读 2022-05-09 16:18:25
    vue项目中,这里需要动态style设置背景图片 <div :style="{'background': data.avatar == ''? 'url(' + defaultImg + ')' :'url(' + data.avatar + ')', 'background-repeat':'no-repeat', 'background-...
  • vue动态绑定style

    万次阅读 2018-07-30 18:45:14
    项目实例: ...:style="{ boxSizing:'border-box',height:29+'px',top:(valch-1)*29+'px', background:chose(val.subjectCode), borderLeft:' 10px ' + ' solid ' + chose1(val.subjectCo...
  • vue动态修改style属性

    千次阅读 2022-06-24 16:57:11
    vue 动态修改style属性
  • vue动态绑定背景图片的方法,具体介绍如下所示: 1.backgroundImage && 三目运算符 1.backgroundImage <div class=right-con :style={backgroundImage: 'url(' + coverImgUrl + ')', backgroundS
  • vue style动态计算宽度 <span class="jdt-text4" :style="{width:`${0.963*item.progress}rem`}"></span>
  • Vue动态修改Style背景色

    千次阅读 2022-02-17 17:26:53
    <div class="reverse-imgdiv" v-bind:style="{ background: activeColor }" 在setup里面修改activeColor即可
  • 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff' ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓...
  • vue 动态 style 计算 calc

    千次阅读 2022-04-02 10:58:34
    动态 style calc
  • vue 动态设置宽度

    千次阅读 2022-07-15 09:14:20
    vue
  • 28-vue基础:vue动态添加style样式

    千次阅读 2022-02-11 09:43:19
    vue基础:绑定属性class,绑定style
  • Vue 动态设置元素高度

    千次阅读 2021-03-07 07:06:25
    1. Vue文件如下let windowHeight = parseInt(window.innerHeight)export default {data() {return {windowHeight: windowHeight,autoHeight: {height: ''},}},methods: {getHeight() {this.autoHeight.height = ...
  • vue 动态设置高度

    千次阅读 2021-04-08 16:37:44
    在项目开发过程中,很多时候都会用到动态计算的样式,比如高度、高度,实现方法: 1、首先在dom元素中定义style属性,如下: <template> <div class="punch-clock-wrapper" ref="punchcontent" :style="{...
  • VUE动态设置背景图片

    千次阅读 2021-09-06 15:04:56
    div :style="setBgColor(target_chn.bgColor)" class="section8 flex-col"> data () { return { // 必须在这里设置加载图片 topImg: { 'top_1': require('./img/top_1.png'), 'top_2': require('./img/...
  • vue动态设置高宽度

    千次阅读 2021-04-23 10:50:17
    <div class="" :style="'width:' + param* 100 + '%'"></div>
  • vue 动态绑定设置元素style 颜色样式

    万次阅读 2019-07-17 13:48:51
    如修改一个按钮的颜色 <el-button circle :style="{'background':colorConfirm,'padding':'7px'}">...设置colorConfirm 的值为需要的颜色样式值 :style="{'background':colorConfirm,'padding':'7px'}" ...
  • vue 动态style 拼接宽度

    千次阅读 2020-11-27 17:21:00
    大众用法: :style=" { width:30px } " 拼接宽度以及其他
  • div class="file-card" :style="{backgroundImage: bgUrl}">...</div> 父组件html部分代码: <infoCard v-for="(item,key) in dataShow" :title="item.title" :total="item.total" :icon="item.icon...
  • vue 的 :style动态切换背景色和字体

    千次阅读 2021-12-22 13:12:53
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...script src.
  • vue :style关于vue 样式动态绑定

    千次阅读 2021-07-22 10:58:38
    vue动态添加style样式 注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 264,732
精华内容 105,892
关键字:

vue动态设置style