How to use ternary operator in Vue JS?

Friday 1st of January 2021 01:45:04 PMVueJS

Ternary condition for v-model

<!DOCTYPE html>
<html>
<head>
    <title>How to use ternary operator in Vuejs? - HtmlcssDownload.com</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 show message

<!DOCTYPE html>
<html>
<head>
    <title>How to use ternary operator in Vuejs? - HtmlcssDownload.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    
<div id="app">
     
  <div>Name: {{ myVar == 1 ? 'HVTeam' : 'HtmlcssDownload.com' }}</div>
  
</div>
    
<script type="text/javascript">
   
    var app = new Vue({
      el: '#app',
      data: {
        myVar:1
      }
    })
     
</script>
     
</body>
</html>

We are Recommending you: