Question

我正在学习Vue.js，我真的很喜欢它，但是我目前遇到了问题。

我的模板中有以下代码：

<button type="button" class="btn btn-warning ml-auto" v-if="steps.length - 1 == currentStep" @click="submitProject" v-html="paymentAmount">{{model.projectSelectedOptions.length < 1 ? 'Publish without option (free)' : paymentAmount }}</button>

计算出的付款金额：

paymentAmount() {
  var amount = 0;
  this.model.projectSelectedOptions.forEach(function(option) {
    if (option == 1) {
      option = 19.99
    } else if (option == 2) {
      option = 9.99
    } else {
      option = 7.99
    }
    amount += option;
  });
  return 'Next : payment (' + amount.toFixed(2) + ' € <span class="price-ht">HT</span>)';
}

我的问题是，如果我将v-html="paymentAmount"放在按钮中，则永远不会看到“ 不带选项发布（免费）”，而只是“ 下一个：付款（0€HT ）”。

如果删除v-html属性，则可以看到“不带选项发布（免费）”，但是当我选择了某些选项时，Vue.js会渲染“ Next : payment (0 € <span class="price-ht">HT</span>)”（因此具有原始跨度）。

我应该怎么做？

编辑： 目前，我添加了一个具有不同v-if条件的按钮，但是如果我可以在一行代码中完成操作，那就太酷了，我不喜欢重复的代码。

Answer 1

如何将所有逻辑都放在计算属性中？

HTML部分：

<button type="button" class="btn btn-warning ml-auto" v-if="steps.length - 1 == currentStep" @click="submitProject" v-html="paymentAmount"></button>

Vue部分：

paymentAmount() {
    if(this.model.projectSelectedOptions.length < 1)
    {
        return 'Publish without option (free)';
    }
    else
    {
        var amount = 0;
        this.model.projectSelectedOptions.forEach(function(option) {
        if (option == 1) {
          option = 19.99
        } else if (option == 2) {
          option = 9.99
        } else {
          option = 7.99
        }
        amount += option;
        });
        return 'Next : payment (' + amount.toFixed(2) + ' € <span class="price-ht">HT</span>)';
    }
}

Answer 2

您可以使用条件span作为按钮内容：

<button
  type="button"
  class="btn btn-warning ml-auto"
  v-if="steps.length - 1 == currentStep"
  @click="submitProject">
  <span v-if="model.projectSelectedOptions.length < 1">Publish without option (free)</span>
  <span v-else v-html="paymentAmount"></span>
</button>

带条件渲染的v-html

2 个答案: