Question

我最近偶然发现了一个问题，找到了一个临时解决方案。

我想知道是否可以编写类似这样的语句

If(a>b)

以HTML ...

我目前正在使用vue.js，并且在v-if中找到了一个临时解决方案，其中包含&，||，!个运算符，但大于或小于等于不起作用（这是我的问题的永久解决方案）。

这是我的临时解决方案：

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

任何帮助将不胜感激。

Answer 1

是的，当<p v-if="a > b">大于<p>时，可以将a写入b的{{1}}元素中（对于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>

以您的示例为例，我假设您尝试按年份比较两个日期字符串（其中models[0].paidDate是日期字符串）。在进行比较之前，您必须将其转换为conditionally render对象：

<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 2

由于您已经提到过使用Vue.js，所以我认为所追求的是条件渲染：

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

您可以按照以下要求进行操作：

<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>

这里是一个小提琴：https://jsfiddle.net/nimeshka/0q5ynm4d/1/

希望它会有所帮助：）

Answer 3

如上所述，您可以继续使用模板中的条件渲染。但是，您的情况不是很简单，需要花费一些时间来弄清楚自己要做什么。如Vue文档所建议，在这种情况下，请考虑使用Computed property。

<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>

我对示例进行了更全面的介绍，以显示整体思想。在模板中，我遍历了由计算属性中的filter方法产生的模型数组。这取决于确定模型是否落入指定日期的方法。您可以找到示例here。

有没有办法在html中编写“如果大于”和“如果小于”语句？

3 个答案: