Tutorials / Vue /

Use the Ternary Operator for Conditionals in Vue

Dec 1, 2022

You can use the ternary operator ? in Vue templates to conditionally display data. The ternary operator works with {{}}, v-text, :show, :class, :style, and other render-only directives. However, you cannot use the ternary operator with v-model.

Vue.createApp({
  data: () => ({ value: 0 }),
  methods: {
    increaseVal() {
      this.value++;
    }
  },
  template: `
  <div>
    <div>
      <button @click="increaseVal">Increase Value by 1</button>
    </div>
    <div>Current Value: {{value}}</div>
    <div :style="{ color: value % 2 === 0 ? 'red' : 'green' }">
      {{value % 2 == 0 ? 'Value is even' : 'Value is odd'}}
    </div>
  </div>
  `
});

With `v-model`

You cannot use the ternary operator ? with v-model expressions. However, remember that two way data binding with v-model is just a combination of v-bind and v-on:input. So if you want to update a different variable based on a condition, you can implement v-model manually as follows.

Vue.createApp({
  // If `disableBinding` is true, updating the text input will not
  // modify `value`
  data: () => ({ disableBinding: false, value: 'Hello, World!' }),
  template: `
  <div>
    <div>
      <div>Text Input:</div>
      <input
        :value="value"
        @change="value = disableBinding ? value : $event.target.value">
    </div>
    <div>
      <div>JS Value:</div>
      <div>{{value}}</div>
    </div>
    <div>
      <div>Disable Binding</div>
      <input type="checkbox" v-model="disableBinding">
    </div>
  </div>
  `
}).mount('#app2');

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

Use the Ternary Operator for Conditionals in Vue

With v-model

More Vue Tutorials

With `v-model`