vue中动态添加style样式的几种写法总结
目录
- vue动态添加style样式总结
- 对象
- 数组
- 三目运算符
- 多重值(浏览器会根据运行支持情况进行选择)
- 绑定data对象
- vue3的style样式的特性
- scoped 属性
- 在 scoped 内部,写全局的样式
- 通过v-bind 函数,在 CSS 中使用 JavaScript 中的变量
vue动态添加style样式总结
项目中可能会需要动态添加 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-3de47834="">1</h1> <style scoped> h1[data-v-3de47834] { 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>>
点击累加器时文本颜色的切换效果,如下图所示:
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)