如何在 VueJS v-if 语句中定义变量而不显示它？

Question

我有一个基于 v-if 语句显示的模板。使用该模板时，需要将某个变量设置为N/A。我不知道该怎么做。看起来它应该如此简单，但我试过将它放在带有 v-if 的标签中，如下所示：

<span v-if="selected==='Powergrid'" Multiplier="N/A">

我试过花括号，但我真的不想显示变量，我只想将它设置为 N/A:

   <span v-if="selectedSim==='Powergrid'">
   {{Multiplier = 'N/A'}}

我试过将其放入模板中：

    <span v-if="selectedSim==='Powergrid'">
      <powergridMenu 
        @Outcome="selectedOutcome = $event"
        @Threshold="outcomeThreshold = $event"
        Multiplier="N/A"
      />

我试着把它放在自己的标签中：

   <span v-if="selectedSim==='Powergrid'">
   <span Multiplier='N/A'></span>

我知道我可以只写一个方法来设置这个变量，但看起来我应该可以只设置一个变量。我做错了什么？？

Answer 1

您应该使用计算值，这就是它的用途：

export default {

  computed: {
    Multiplier() {
      return this.selectedSim==='Powergrid' ? 'N/A' : ''
    }
  }
}

注意上面的代码使用了options api；如果您想使用 composition api，请阅读 docs 关于如何在 composition api.

中使用计算属性的内容

如何在 VueJS v-if 语句中定义变量而不显示它？

How can I define a variable in a VueJS v-if statement without displaying it?

javascript

vue.js