How to use ternary operator in vue.js?

Member

by kadin , in category: Javascript , 5 months ago

How to use ternary operator in vue.js?

Facebook Twitter LinkedIn Telegram Whatsapp

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.