我有一个Vue.js组件,当if条件为true时,我想使用此CSS部分:
<style type="text/css">
#sideNavBox {DISPLAY: none}
#contentBox {MARGIN-LEFT: 5px}
</style>
这是JavaScript:
IsCurrentUserMemberOfGroup("Admins", function (isCurrentUserInGroup) {
if(isCurrentUserInGroup) {
for (var i = 0; i < data.length; i++) {
$this.teams.push({
id: data[i].ID,
TeamName: data[i].TeamName.TeamName,
Coach: data[i].Coach,
CoachTel: data[i].CoachTel,
CoachAddress: data[i].CoachAddress,
CoachAssistant: data[i].CoachAssistant,
CoachAssistTel: data[i].CoachAssistTel,
CoachAssistAddress: data[i].CoachAssistAddress,
Email: data[i].Email
});
}
console.log("Works!")
}
});
我可以在其中添加CSS部分
<style>
</style>
但随后它将一直使用。
如果if语句为true,如何使用CSS部分?
您在这里有几个选择:
就个人而言,我更喜欢使用类。这是一个例子:
const val = 42;
// Conditional
if (val === 42) {
setTimeout(() => {
document.querySelector('.box').classList.add('box--blue');
}, 1000);
}
if (val === 100) {
setTimeout(() => {
document.querySelector('.box').classList.add('box--green');
}, 1000);
}
.box {
width: 100px;
height: 100px;
background-color: deeppink;
transition: all 2s ease;
}
.box--blue {
background-color: dodgerblue;
}
.box--green {
background-color: limegreen;
}
<div class="box" />