精华内容
下载资源
问答
  • 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-size':'100%'
          }"
    ></div>
    
    更多相关内容
  • vue 动态 style 计算 calc

    千次阅读 2022-04-02 10:58:34
    动态 style calc

    vue 动态 style 计算 calc

       :style="updateMrRight()"
    
        methods: {
        updateMrRight() {
        //动态设置 marginright 值
          let w = "1200px";
          let num = this.lineNum;
          return { marginRight: `calc(${w} / ${num} - 185px)` };
        },
      },
    

    展开全文
  • vue 动态style 拼接宽度

    千次阅读 2020-11-27 17:21:00
    大众用法: :style=" { width:30px } " 拼接宽度以及其他

    大众用法:
    :style=" { width:30px } "
    因为项目涉及到进度条用行内样式 拼接宽度
    在这里插入图片描述
    其中item.progressNum 是后台返回的数据,

    展开全文
  • vue动态style动态伪类元素

    千次阅读 2020-08-07 14:20:53
    vue动态style动态伪类元素 在css中使用“- -”为前缀定义变量, 使用var()函数来读取定义的css变量: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    vue动态style、动态伪类元素

    1. 在css中使用“- -”为前缀定义变量, 使用var()函数来读取定义的css变量:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        /* 定义一个全局css变量 */
        :root {
            --txtColor: pink;
        }
    
        .test {
            /* 读取定义的--txtColor变量 */
            color: var(--txtColor);
        }
    
        /* 局部css变量 */
        .test2 {
            --txtColor2: blue;
        }
    
        .test2 p {
            color: var(--txtColor2);
        }
    
        /* 不起作用 */
        .test3 {
            color: var(--txtColor2);
        }
    </style>
    
    <body>
        <div class="test">
            hello word!!!
        </div>
    
        <div class="test2">
            <p> hello word!!! </p>
        </div>
    
        <div class="test3">
            hello word!!!
        </div>
    </body>
    
    </html>
    
    1. 根据css中变量使用方法,可以结合vue动态绑定,给元素添加一个局部css变量,对元素样式和伪类元素进行动态样式绑定
    <template>
      <div>
        <span :style="{ '--width': widthVar }" class="span2">hello word!!!</span>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          widthVar: '100px'
        }
      }
    }
    </script>
    <style scoped>
    .span2 {
      text-align: center;
      position: relative;
      width: var(--width);
    }
    .span2::after {
      content: '';
      display: block;
      position: absolute;
      left: 100%;
      width: var(--width);
      height: var(--width);
      border-radius: 50%;
      border: 1px solid pink;
    }
    </style>
    
    展开全文
  • vue动态绑定style样式之动态添加style样式的多种写法
  • <div class="reverse-imgdiv" v-bind:style="{ background: activeColor }" 在setup里面修改activeColor即可
  • 28-vue基础:vue动态添加style样式

    千次阅读 2022-02-11 09:43:19
    vue基础:绑定属性class,绑定style
  • vue动态添加style样式的几种写法

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

    万次阅读 2020-03-19 16:28:22
    凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 对象 ...
  • Vue前端实现动态style

    千次阅读 2021-08-13 16:19:48
    目前市场上Vue大受欢迎,最近在探索动态style,请各位大家赐教。 用法: 1、常规用法 vue元素中 :style="{‘styleName1’:value1,‘styleName2’:value2}" 例: // An highlighted block <el-button class=...
  • 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-03-19 10:46:51
    有的时候需要设置style中的属性,但又不想总是行内的绑定,所以希望能设置个变量来替代style中的值。 具体办法: 1.定义ref在div标签中,ref要定义在需要修改class属性的标签上。 2.在style中定义变量--bgColor。...
  • 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-05-24 10:30:56
    凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff      对象 ...
  • style width 这个问题 折磨了我一个上午了 好惭愧因为项目涉及到 进度条 所以必须用行内样式 style用过vue的都知道 vuestyle的用法大众用法:style=" { width:30px } "但是现在涉及到拼接了 直接上代码了其中list...
  • vue中,动态绑定样式——动态绑定style写法 & 动态class写法 1、动态绑定style写法 注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,...
  • Vue使用:style动态绑定backgroundImage

    千次阅读 2021-12-28 11:05:13
    :style="{backgroundImage:'url('+msg.url+')'}" ></div> data() { return { activeIndex: '1', msg: { url: require('../../assets/img/banner1.jpg'), } } }, 忘记怎么写了,网上找的写法...
  • vue动态添加style的样式

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

    千次阅读 2021-07-22 10:58:38
    vue动态添加style样式 注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff ...
  • 多个style样式绑定,又有背景图片时,就这样就行啦背景图片链接的判断要用另一个()括起来 <div :style="{'background' : 'url('+(ruleBgImage ? ruleBgImage : '' )+')','padding-bottom':(showDiv ? '15px'...
  • vue动态绑定样式:style

    千次阅读 2019-06-28 21:19:15
    1.直接在元素上通过:style的形式,书写样式对象<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 在data上定义样式data:{ styleObj1:...
  • //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css"; style.innerText = "@font-face {font-family:'PingFang-Regular';src:url('http:...
  • vue: 动态添加样式

    千次阅读 2020-12-20 13:22:20
    vue如何操作html模版,使页面样式发生改变... 动态的操作style内联样式------------------------ 动态class-----------------------------显示或者隐藏需求1. 点击图片使isCircle取反需要2. 如果isCircle使false,就...
  • Vue-style,class绑定,以及动画

    千次阅读 2020-06-17 18:01:16
    Vue-style,class绑定,以及动画vue的参数对象Vue指令加深Vue 操作dom---`$refs``class`的绑定`style`绑定Vue中的动画transfrom动画关键帧动画动画模式动画组动画 vue的参数对象 el vue的作用域(模板指定) ...
  • 三目运算符vue语法 #标签内容 {{button? ‘取消’ :‘确定’}} 【例子】 <el-button class="button" type="primary" @tap="handleClick">{{button? '取 消' : '确 定'}} </el-button> #...
  • 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff' ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓...
  • vue :style 使用calc()

    千次阅读 2021-11-29 20:29:25
    css calc() 可以给% 和 rem等单位加减px...如何在:style使用calc() <div :style="aaa"></div> aaa() { let w = '50%'; let ml = '10%'; return {width: `calc(${w} + 2px)`, marginLeft: `calc(${..
  • vue动态绑定style和三目绑定class

    千次阅读 2018-12-12 16:57:57
    v-for="(valch,index2) in val.courseTimeCodes" :style=" {boxSizing:'border-box',height:29+'px',top:(valch- 1)*29+'px',background:chose(val.subjectCode),borderLeft:' 10px ' + ' solid ' + chose1...
  • 话不多说,贴代码,具体的可以去贴上去试试,主要其实不在js代码 而是在于style动态样式绑定 <view class="segBgView"> <block v-for="(item,index) in segTitleArr" :key="index"> <view class...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 270,901
精华内容 108,360
关键字:

vue动态style