We will learn How to use the ternary operator in Vue JS?
I will give you two example:
1) ternary condition for v-model
2) ternary condition for simple
ternary condition for v-model
<!DOCTYPE html>
<html>
<head>
<title>How to use ternary operator in Vuejs? - rathorji.in</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="$data[myCondition ? 'name' : 'title']">
<div>Name: {{ name }}</div>
<div>Title: {{ title }}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: '',
title: '',
myCondition:true
}
})
</script>
</body>
</html>
ternary condition for simple
<!DOCTYPE html>
<html>
<head>
<title>How to use ternary operator in Vuejs? - rathorji.in</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<div>Name: {{ myVar == 1 ? 'Hardik' : 'rathorji.in' }}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
myVar:1
}
})
</script>
</body>
</html>
I hope this helped you...