vue3点击之后加css样式在Vue3中可以再css标签中使用v-bind()来绑定一个属性控制它的样式,注意:如果你的数据不是使用Vue3的 ref 或者 reactive使其变成响应
单文件组件样式 RFC 为 Vue 开发人员提供了一种将组件的响应数据用作 CSS 变量的方法。
更复杂的数据结构，假设我们有一个名为 font 的对象，并且其中有一个名为 weight 的属性。
Vue 提供了内置的响应式系统，我们只需要修改响应式中的数据，便可以动态的修改页面中的外观。
使用到了 CSS 变量 ，我们样式中的 v-bind 最终将被编译为使用 CSS var 语法和我们的新 CSS 变量。
如果您希望在生产环境中实现这一点，请确保检查浏览器对 CSS 变量的支持。
如果没有 CSS 变量，SFC 样式变量将无法工作，因此如果您的应用程序需要支持某些较旧的浏览器，这对您来说可能不是一个可行的选择。
以下是 CSS 变量 支持情况：
template
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tabisSelected}">
<a :href="tabhref" @click="selectTab(tab)">{{tabname}}</a>
</li>
</ul>
script
selectTab(selectedTab) {
thistabsforEach(tab => {
tabisSelected = (tabname == selectedTabname);
})
}
给每个a标签绑定一个方法，并传入当前对象作为参数
当点击时遍历所有a标签，比较当前遍历对象的某个属性（例子中的name)与传入对象的某个属性
比例结果赋值给一个flag（例子中的isSelected属性）,由这个flag去控制：class
从而实现数据驱动样式
ss文件中如何得到某个属性值：
一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，
返回的是一个CSS样式声明对象 ， 只读， 此方法支持Firefox浏览器;
语法：var style=windowgetComputedStyle(“元素”，“伪类”);第一个参数是必须的，第二个为可选的。
二、currentStyle 是一款可以兼容IE浏览器的属性返回的是当前所有最终使用的CSS属性值，
利用elementCurrentStyleattribute可获取
其与getComputedStyle区别：1、 currentStyle不支持伪类样式获取；
2、currentStyle不支持现代浏览器，支持IE
代码说明：
[html] view plain copy
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#div1{
width:100px;height:100px;background: red;
}
</style>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
var oDiv = documentgetElementById('div1');
/
只能获取，不能设置
获取到的是计算后的样式
最好不要获取复合样式
所获取的样式要设初使值
获取到的样式类型是字符串
别空格 [' width']
获取到的样式带px的
transform 获取不到
transition 不准确
/
function getStyle(obj,attr){
if(objcurrentStyle){ //IE
return objcurrentStyle[attr];
}else{
return getComputedStyle(obj,"伪类")[attr]; //Firefox
}
}
alert(getStyle(oDiv1,'background'));</html></span>
以上就是关于vue3点击之后加css样式全部的内容，包括:vue3点击之后加css样式、Vue CSS 变量 — 响应式样式 RFC、vue.js怎么动态设置css等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）