目录Vue动态添加style样式总结对象数组三目运算符多重值(浏览器会根据运行支持情况进行选择)绑定data对象vue3的style样式的特性scoped 属性在 scop
项目中可能会需要动态添加 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'] }"html :style="styleObject"
data() {
return{
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}定义的 CSS 就只会应用到当前组件的元素上，这样就很好地避免了一些样式冲突的问题。
我们项目中的样式也可以加上如下标签：
<style scoped>
h1 {
color: red;
}
</style>>这样，组件就会解析成下面代码的样子。标签和样式的属性上，新增了 data- 的前缀，确保只在当前组件生效。
<h1 data-v-3De47834="">1</h1>
<style scoped>
h1[data-v-3de47834] {
color: red;
}
</style>可以用:global 来标记，这样能确保你可以很灵活地组合你的样式代码
<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>>点击累加器时文本颜色的切换效果，如下图所示：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: vue中动态添加style样式的几种写法总结
本文链接: https://www.lsjlt.com/news/168991.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0