有没有办法在 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/vue@2.5.16"></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/vue@2.5.16"></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>

Answer 3

As already answered above, you may go ahead and use conditional rendering as is within the template. However, your condition is not very straightforward and it takes some time to figure out what you're after. As Vue documentation suggests, consider using Computed property in this case.

<div id="app">
  <h2>Models:</h2>
  <ul>
    <li v-for="model in modelsInDateRange">
        {{model.name}}, paid on: {{model.paidDate}}
    </li>
  </ul>
</div>

<script>
new Vue({
    el: "#app",
    data: {
       startYear: 2016,
       endYear: 2017,
       models: [
          { paidDate: '2018-10-08', name: 'Model 2018'},
          { paidDate: '2017-10-08', name: 'Model 2017'},
          { paidDate: '2016-10-08', name: 'Model 2016'},
          { paidDate: '2015-10-08', name: 'Model 2015'},
      ]
    },
    computed: {
        modelsInDateRange() {
            return this.models.filter(this.modelInDateRange);
        }
    },
    methods: {
        modelInDateRange(model) {
           const year = new Date(model.paidDate).getFullYear();
           if (year >= this.startYear && year <= this.endYear) {
              return true;
           }
           return false;
        }
    },
});
</script>

I made the example a bit more thorough to show the overall idea. In the template I loop through array of models that results from the filter method in the computed property. That relies on a method that determines whether the model falls into the specified date or not. You can find the example here .