首页 > 其他分享 >vue中动态添加style样式的几种写法总结

vue中动态添加style样式的几种写法总结

时间:2024-01-26 10:11:25浏览次数:36  
标签:style vue color 样式 html fontSize 写法 red

项目中可能会需要动态添加 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"
    }
  }
}

vue3的style样式的特性
scoped 属性
定义的 CSS 就只会应用到当前组件的元素上,这样就很好地避免了一些样式冲突的问题。

我们项目中的样式也可以加上如下标签:

<style scoped>
h1 {
  color:red
}
</style>>

这样,组件就会解析成下面代码的样子。标签和样式的属性上,新增了 data- 的前缀,确保只在当前组件生效。

<h1 data-v-ade47834="">1<h1>
<style scoped>
h1[data-v-ade47834} {
  color:red
}
</style>>

在 scoped 内部,写全局的样式
可以用:global 来标记,这样能确保你可以很灵活地组合你的样式代码
通过v-bind 函数,在 CSS 中使用 JavaScript 中的变量

<template>
  <div>
    <h1 @click="add">{{ count }}</h1>
  </div>
</template>
 
<script setup>
import { ref } from "vue";
let count = ref(1)
let color = ref('red')
function add() {
  count.value++
  color.value = Math.random()>0.5? "blue":"red"  // 随机生成一个0-1之间点数字
}
</script>
 
<style scoped>
h1 {
// v-bind 函数绑定 color 的值
  color:v-bind(color);
}
</style>>

点击累加器时文本颜色的切换效果,如下图所示:
原文转自:https://www.jb51.net/article/264526.htm

标签:style,vue,color,样式,html,fontSize,写法,red
From: https://www.cnblogs.com/axingya/p/17988726

相关文章

  • vue echarts hooks 封装
    vue中echartshooks的封装,监听主体的变化,监听窗口大小的变化。监听元素大小的变化hooksimportechartsfrom'@/echart/themeInit'import{debounce}from'@/utils/dehounce'import{useAppStore}from'@/pinia'constuseEchartHooks=(id,groupId)=>{......
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv
    使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云,项目地址:gitee.com/breezefaith…目录一、前言近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台......
  • vue的几个小分享
    1.VNode钩子在每个组件或html标签上,我们可以使用一些特殊的(文档没写的)钩子作为事件监听器。这些钩子有:onVnodeBeforeMountonVnodeMountedonVnodeBeforeUpdateonVnodeUpdatedonVnodeBeforeUnmountonVnodeUnmounted我主要是在组件上使用onVnodeMounted,当需要......
  • vue实现将word转换为HTML页面,并实现类似word的目录导航和关键字搜索跳转
    <template>  <divclass="content">    <divclass="header">      <divclass="title">        XXXXXX      </div>      <divclass="search">   ......
  • Vue 3高级响应式数据探秘:原理、用法详解与实战示例!
     在Vue3中,数据的变化通过响应式系统来实现,该系统基于ES6的Proxy对象。Proxy对象允许拦截并自定义操作,因此Vue可以通过代理对象来实现对数据的监听和触发相应的操作。以下是Vue3中监测数据改变的原理、使用方法和步骤的详细描述,以及一个实例代码:原理:Vue3的响应式系统基于P......
  • Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南
     在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块。以下是详细描述和相应的示例代码:1.使用fetch方法加载JSON文件:步骤:创建一个JSON文件,例如 data.json://data.json{"name":"John","age":......
  • vue项目安装更新依赖时,npm install 卡住
    在代码安装或者更新依赖时,经常碰到npminstall以后很多种卡住的情况,记录部分1.版本不对可能电脑存在多个项目,多个node版本。安装使用nvm(node版本管理工具),1.安装,先把已安装的node下载掉https://nvm.uihtm.com/download.html(目前国内可下载)https:/......
  • 2024年1月Java项目开发指南10:vite+Vue3项目创建
    新建项目安装routernpminstallvue-router在src下新建目录router,在目录下新建index.js在index.js里面配置路由import{createRouter,createWebHistory}from'vue-router';//定义路由constroutes=[//在这里配置路由];//创建路由实例constrouter=......
  • vue2.x项目升级到2.7
    背景老代码库了,但是升级到v3的话成本比较大,准备先升级到2.7,用上compositon-api,后续再引入ts,慢慢改过来。改动点//package.json{..."vue":"^2.7.0",..."vue-template-compiler":"^2.6.10",//移除掉,用不上了"vue-loader":"^15.10.0&quo......
  • vue print.js 打印 此处打印不包含页面的页码 (打印方法二)
    <template><divclass="modalContainerprintAsset"ref="modalContainer"><divv-for="(items,index)intableDataPrint":key=indexstyle="page-break-after:always;zoom:1"ref="show......