How to use ternary operator in vue.js?
How to use ternary operator in vue.js?
1 answer
by
elisha_langworth ,
5 months ago
@kadin
In Vue.js, you can use the ternary operator to conditionally render elements or display values. The syntax for the ternary operator in Vue.js is:
1
|
<span>{{ condition ? 'Value if true' : 'Value if false' }}</span>
|
Here's an example of how you can use the ternary operator in Vue.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template>
<div>
<span>{{ isLoggedIn ? 'Welcome User' : 'Please Login' }}</span>
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: true, // or false to test the condition
};
},
};
</script>
|
In the above example, if isLoggedIn is true, it will display "Welcome User", otherwise it will display "Please Login".
You can also use the ternary operator to conditionally render elements like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template>
<div>
<button v-if="showButton" @click="handleClick">Click Me</button>
</div>
</template>
<script>
export default {
data() {
return {
showButton: true, // or false to test the condition
};
},
methods: {
handleClick() {
// Perform some action
},
},
};
</script>
|
In this example, if showButton is true, it will render the button element.