vue动态添加style样式

简介: vue动态添加style样式

 在开发项目时,可能会需要动态添加 style 行内样式,那如何动态地添加style样式呢?下面就说说几种方法:

  • 对象形式
:style="{ fontSize: fontSize + 'px' }"

:style="{color:( number==0?fontColor:'#000')}"
  • 数组形式

    :style="[baseStyles, otherStyles]"
    :style="[{color:(number==0?fontColor:'#000')},{fontSize:'25px'}]"
    
  • 三目(元)运算符形式

    :style="{color:(number==0?fontColor:'#000')}"
    :style="[{color:(number==0?fontColor:'#000')}]"
    
  • 多重值形式(根据浏览器内核情况进行选择)
    :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"
    
  • 绑定data对象形式
    :style="needStyle"
    data() {
         
      return{
         
        needStyle: {
         
          color: 'blue',
          fontSize: '16px'
        }  
      }
    }
    
    注意:
      1. 凡是css中有 - 的style属性名都要变成驼峰式,比如font-size要变成fontSize、background-color要变成backgroundColor。
      2. 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor: '#00a2ff',而不是 backgroundColor: #00a2ff。
目录
相关文章
|
17小时前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
9 1
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
9 1
|
2天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
8 0
|
2天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
8 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1039 0
|
3天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
19 1
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
10 2
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
6 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
3天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
19 1