Complex Conditionals in Vue
In the v-if directive, you can make more complex conditions. For example, let the num property be one of the numbers 1, 2 or 3:
data() {
return {
num: 3, // let there be 3 now
}
}
Let's now make three paragraphs, of which only one will be shown depending on the value of the num property:
<template>
<p v-if="num === 1">one</p>
<p v-if="num === 2">two</p>
<p v-if="num === 3">three</p>
</template>
You can also make more complex conditions:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
Given a property day, which contains the current day of the week. Let's also assume that you have seven paragraphs, each containing the name of the day of the week. Make it so that only the paragraph containing the name of the current day of the week is visible on the screen.
