<dd></dd>标记中的

Question

我有一个带有vue js代码的片段。此代码打印一些值。

              <dl>
                <!-- Fan speed -->
                <dt>{{ $t('pageInventory.table.fanSpeed') }}:</dt>
                <dd>{{ dataFormatter(item.speed) }}</dd>
              </dl>

但是如果我有值== -1，我应该打印0。我用C风格编写了这段代码，但是它有一个编译错误。

  <dd>{{ (item.speed != -1) ? dataFormatter(item.speed) : dataFormatter('0') }}</dd>

我有个这样的错误

error Replace {{·dataFormatter((item.speed·!=·-110)·?·item.speed·:·'0')·}} with ⏎··················{{·dataFormatter(item.speed·!=·-110·?·item.speed·:·'0')·}}⏎················

我该怎么写。帮帮我！

Answer 1

在这里，ESlint主要是因为您在这里的附加括号(item.speed·!=·-110)而抱怨(如果您在字符串和“必需”字符串之间有所区别，您可以注意到这一点)。

尽管如此，您仍然需要自动化这一点，以遵循ESlint/更漂亮的指导方针，而不是每次自己做一个不同的修改。

如果您在VScode并运行，请尝试打开命令调色板(ctrl + shift + p)

>ESlint: Fix all auto-fixable Problems 

PS:当然，您需要在代码编辑器中安装VScode扩展。

当然，您可以使用下面的代码编辑器(settings.json，可使用命令调色板+ >Preferences: Open Settings (JSON))将其设置为保存代码。

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": false,
    "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

Answer 2

期望您的三元分支不会重复函数调用。例如：

// rewrite this
condition ? func(arg1) : func(arg2)

// into this
func(condition ? arg1 : arg2)

我也建议否定可读性的条件--对人类来说，这样做更容易。

至于其他方面，与其尝试手动应用格式化规则，不如让更漂亮的格式化程序为您提供帮助。

总之，你会得到这样的东西：

<dl>
  <!-- Fan speed -->
  <dt>{{ $t('pageInventory.table.fanSpeed') }}:</dt>
  <dd>
    {{ dataFormatter(item.speed === -1 ? '0' : item.speed) }}
  </dd>
</dl>