Use the Ternary Operator for Conditionals in Vue
source link: https://masteringjs.io/tutorials/vue/ternary-operator
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Use the Ternary Operator for Conditionals in Vue
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!
More Vue Tutorials
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK