如何在 Vue.js function 中使用 if 语句？

Question

我想做的是让结果 function 提供两个不同的方程：

if {{ basketballbet.odds }}值为正，则return this.number1*(this.number2/100)

if {{ basketballbet.odds }}值为负，则return this.number1*(100/this.number2) 。

有谁知道这是否可能？

代码：

<div id="odds_calculator">
<p>Placing <input type="number" name="number1" v-on:input= "update_number1"> on this bet would win you $XXXX if you were to win the bet.</p>

  <p>Bet Amount: [[ number1  ]] </p>
  <p>Odds: {{ basketballbet.odds }}</p>

  <hr>
  <p>Result: [[ result() ]]</p>
</div>
<script>
new Vue({
  delimiters: ['[[',']]'],
  el: '#odds_calculator',
  data: {
    number1: 0,
    number2: {{ basketballbet.odds }},
  },
  methods: {
    update_number1: function (event) {
      this.number1 = event.target.value;
    },
    result: function () {

      return this.number1*(this.number2/100);
    },

  },
});
</script>

Answer 1

是的。 如果它只是一个正值或负值，那么您可以使用Math.sign() 。 在这里查看更多信息。

例如：

if (Math.sign(this.number2) == 1) {
  //positive
}else if (Math.sign(this.number2) == -1) {
  //negative
}else {
  //zero
}

祝你好运！

Answer 2

是的，你可以，但这也是向三元运算符介绍自己的绝佳机会

new Vue({
  delimiters: ['[[',']]'],
  el: '#odds_calculator',
  data: {
    number1: 0,
    number2: {{ basketballbet.odds }},
  },
  methods: {
    update_number1: function (event) {
      this.number1 = event.target.value;
    },
    result: function () {
      //here is the aforementioned ternary operator
      return this.number2 < 0 ? this.number1*(100/this.number2) : this.number1*(this.number2/100);
    },

  },
});

Answer 3

result: function() {
  if (this.number1 > 0) {
    return this.number1 * (this.number2 / 100);
  } else if (this.number1 < 0) {
    return this.number1 * (100 / this.number2);
  }
},