精华内容
下载资源
问答
  • vue动态添加style样式
    千次阅读
    2020-05-28 17:21:46

    1.凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize
    2.除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff

    【对象】
    html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
    html :style="{color:(index==0?conFontColor:’#000’)}"

    【数组】
    html :style="[baseStyles, overridingStyles]"
    html :style="[{color:(index==0?conFontColor:’#000’)},{fontSize:‘20px’}]"

    【三目运算符】
    html :style="{color:(index0?conFontColor:’#000’)}"
    html :style="[{color:(index
    0?conFontColor:’#000’)},{fontSize:‘20px’}]"

    【多重值】
    此时,浏览器会根据运行支持情况进行选择

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

    【绑定data对象】
    html :style=“styleObject”

    data() {
        return{
          styleObject: {
            color: 'red',
            fontSize: '13px'
          }  
        }
    

    https://blog.csdn.net/weixin_30736301/article/details/100093744

    更多相关内容
  • 28-vue基础:vue动态添加style样式

    千次阅读 2022-02-11 09:43:19
    vue基础:绑定属性class,绑定style

    注意:

    • 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如
    • backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff

    【对象】

    • html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
    • html :style="{color:(index==0?conFontColor:’#000’)}"

    【数组】

    • html :style="[baseStyles, overridingStyles]"
    • html :style="[{color:(index==0?conFontColor:’#000’)},{fontSize:‘20px’}]"

    【三目运算符】

    • html :style="{color:(index==0?conFontColor:’#000’)}"
    • html :style="[{color:(index==0?conFontColor:’#000’)},{fontSize:‘20px’}]"

    【多重值】

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

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

    【绑定data对象】

    • html :style=“styleObject”
    data() {
        return{
          styleObject: {
            color: 'blue',
            fontSize: '16px'
          }  
        }
    }
    

    转载于:https://juejin.im/post/5d5dfbde6fb9a06b122f4226

    展开全文
  • 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。

    项目中可能会需要动态添加 style 行内样式,但是在长期维护的项目里面,尽量要避免使用。

    注意:

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

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

    对象

    html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
    
    html :style="{color:(index==0?conFontColor:'#000')}"

    数组

    html :style="[baseStyles, overridingStyles]"
    
    html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

    三目运算符

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

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

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

    绑定data对象

    html :style="styleObject"
    
    data() {
        return{
          styleObject: {
            color: 'red',
            fontSize: '13px'
          }  
        }
    }

    展开全文
  • vue动态添加style样式

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

    千次阅读 2021-03-12 20:12:51
    根据 data 里面定义的变量,动态渲染页面上的样式,使用三元运算解决。 class=“pastPersons > 0 ? ‘select’ : ‘’” <li class="pastPersons > 0 ? 'select' : ''"> <div class="left-div0306"&...
  • Vue动态添加样式的方法

    千次阅读 2021-12-15 14:29:58
    一、动态添加class的方法 根据数据长度判断是否展示类名 <div :class="item.length > 3?'active':''></div> 定义data,添加class及style <div :class="styleList[item.xxx].hovers" :style=...
  • vue: 动态添加样式

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

    千次阅读 2020-09-15 19:44:54
    vue动态添加:style和:class样式 一开始我是参考下面那个文章的,但是实现不了,改成这样就行了。 :style三元表达式: :class对象形式,前面是类名,后面是条件。条件成立则使用对应的样式 参考:...
  • //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css"; style.innerText = "@font-face {font-family:'PingFang-Regular';src:url('http:...
  • <div class="item" v-for="(item,...div :style="{background:item.value ? '#FFFFFF' : '#000000'}"> </div> </div> 以上是一个简单的循环列表,根据每一项不同的的value值来显示对应的颜色 ...
  • Vue动态修改Style背景色

    千次阅读 2022-02-17 17:26:53
    <div class="reverse-imgdiv" v-bind:style="{ background: activeColor }" 在setup里面修改activeColor即可
  • vue :style关于vue 样式动态绑定

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

    千次阅读 2022-04-25 00:20:34
    style绑定 注意: 凡是有 - 的 style 属性名都要变成驼峰式,比如font-size要变成fontSize。 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff' 而不是 backgroundColor:#00a2ff 对象: ...
  • vue如何动态的绑定style样式

    千次阅读 2020-07-08 12:06:10
    span v-else class="nvwa-iconfont" :style="{'color':cNodeColor,'font-size': '14px'}" :class="row.flag === 1 ? 'icon-_Txiaoxitishi':'icon-_Tchenggongtishi'"> </span> // :style="{'color':row....
  • } } 给定一个样式,三目判断,如果 定义的 activeClass 等于dxal (p标签的id) 那么就给定 active 样式 ,否则就为 空 再添加一个 类样式 :class="activeClass ==‘dxal’ ? ‘active’:’ ' css .active { border: ...
  • 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff <template> <div :...
  • vue动态添加样式 :style 和 :class

    万次阅读 2019-03-05 15:11:28
    动态添加可以采用:class 也可以采用:style 但是在一个长期维护的项目里面:style行内样式尽量避免。 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 -->...
  • 定义的 CSS 就只会应用到当前组件的元素上,这样就很好地避免了一些样式冲突的问题。 我们项目中的样式也可以加上如下标签: <style scoped> h1 { color: red; } </style>> 这样,组件就会解析...
  • 1.直接在元素上通过:style的形式,书写样式对象 这是一个H1 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:...
  • 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:...
  • 当我们需要根据条件去动态绑定class、style的时候,我们可以有如下方法:
  • 如图,给div添加style的时候提示有错误。 vue ui的错误提示如下 是因为我导入的less和less-loader的版本太高了都是最新的版本。然后卸载了这两个,在终端里面重新下载低版本的。 npm install less@3.9.0 -s npm ...
  • Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以...动态添加样式 v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。C
  • Vue动态绑定class和动态绑定style

    千次阅读 2022-05-20 14:28:27
    动态绑定class <template> <div class=""> <div :class="{ aa: isaa > 10 ? true : false }"></div> <button @click="fn">点击显示</button> </div> </...
  • vue动态style动态伪类元素

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,416
精华内容 16,166
关键字:

vue动态添加style样式