Start your All-Access Pass to unlock this challenge
Let's say we have a class called .controversial-flavor
in a modular css tag. We want
to assign this class to an element in the template if our pizza cointains pineapple. For this,
we've constructed a component like this:
<template>
<div :class="$style.component">
<span>{{ pizza.name }}</span>
</div>
</template>
<script>
export default {
name: 'PizzaName',
props: ['pizza'],
};
</script>
<style lang="scss" module>
.component {
width: 120px;
display: inline-block
.controversial-flavor {
color: red;
}
}
</style>
We know that pizza
has a property called containsPineapple
, which is a boolean.
How can we conditionally show the .controversial-flavor
class if the pizza contains
pineapple?