is there a way to write "If Greater than" and "If less than" statement in VUE html?

Question

I've stumbled upon a problem recently, to which I've found a temporary solution.

I'd like to know whether it's possible to write a statement like,

If(a>b)

in HTML...

I'm currently working in vue.js, and I've found a temporary solution in v-if with &, ||, ! operators, but greater than or less than doesn't work (which is a permanent solution to my problem).

Here's my temporary solution:

v-if="models[0].paidDate.contains('2018') || models[0].paidDate.contains('2019') || models[0].paidDate.contains('2017')"

Any help will be greatly appreciated.

Answer 1

Since you have mentioned you're using Vue.js, I think what you're after is conditional rendering:

https://v2.vuejs.org/v2/guide/conditional.html

You can do what you have asked like this:

<div id="app">
  <p v-if="number > 5">{{number}} is greater than 5</p>
  <p v-else>{{number}} is less than 5</p>
</div>


<script>
    new Vue({
      el: '#app',
      data: {
        number: 2
      }
    });
</script>

Here is a fiddle: https://jsfiddle.net/nimeshka/0q5ynm4d/1/

Hope it helps :)

Answer 2

Yes, it's possible to write <p v-if="a > b"> to conditionally render the <p> element when a is greater than b (and similarly for v-if="a < b").

new Vue({
  el: '#app',
  data() {
    return {
      a: 1,
      b: 2,
      c: 3,
      d: 4
    };
  }
})

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <p v-if="a > b">a is greater than b</p>
  <p v-else>a is less than or equal to b</p>
  
  <p v-if="c < d">c is less than d</p>
  <p v-else>c is greater than or equal to d</p>
</div>

Given your example, I'm assuming you're trying to compare two date strings by year (where models[0].paidDate is a date string). You'd have to convert that to a Date object before doing the comparison:

<p v-if="new Date(models[0].paidDate).getFullYear() > 2017">

new Vue({
  el: '#app',
  data() {
    return {
      models: [
        { paidDate: '2017-10-11T21:11:44.741Z' },
        { paidDate: '2018-01-02T11:15:30.233Z' },
        { paidDate: '2016-05-23T09:19:25.445Z' },
        { paidDate: '2015-08-03T20:47:54.777Z' },
        { paidDate: '2019-11-05T23:36:21.098Z' },
        { paidDate: '2020-09-19T08:22:10.112Z' },
      ]
    };
  }
})

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <h3>All Dates</h3>
  <ul>
    <li v-for="(model, index) in models">
      {{index}} - {{new Date(model.paidDate).toString()}}
    </li>
  </ul>

  <h3>Dates after 2017</h3>
  <ul>
    <li v-for="(model, index) in models" v-if="new Date(model.paidDate).getFullYear() > 2017">
      {{index}} - {{new Date(model.paidDate).toString()}}
    </li>
  </ul>
</div>