Question

我有一个循环，正在创建许多不同的按钮。在我的data属性中，我具有要用于控制显示图标还是旋转加载程序的布尔值。

我正在考虑使用v-if或绑定类，以便应用CSS。我知道下面的v-if和:class是不正确的，但我只想显示到目前为止我有两种不同的方法。这两种方法的正确语法是什么？

<button
  v-for="action in actionTypes"
    <div
      class="btn btn-shell-grey">
      <component
        :is="`icon-${ action }`"
        v-if="[`${ action }LoadingComplete`]"
        :class="{ hidden: ![ action + 'LoadingComplete']}>
      </component>
      <icon-spin
        v-if="![`${ action }LoadingComplete`]"
        :class="{ hidden: ![ action + 'LoadingComplete']}>
      </icon-spin>
    </div>
  </button>


data(){
  return {
    saveLoadingComplete: true,
    uploadLoadingComplete: true
  }
}

Answer 1

您非常接近在提供的代码段中使用正确的语法。

要通过HTML中动态构造的属性名称访问数据，请使用$data，该代理可以访问数据，如下所示：

v-if="$data[`${action}LoadingComplete`]"

And here's a basic working example of this in action.

Answer 2

我从不需要使用CSS在vue中隐藏组件。我始终使用条件渲染（https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show）。在您的情况下，它应该看起来像这样。

<button
  v-for="action in actionTypes"
    <div
      class="btn btn-shell-grey">
      <component
        :is="`icon-${ action }`"
        v-if="action.loadingComplete"
      </component>
      <icon-spin
        v-if="!action.loadingComplete"
      </icon-spin>
    </div>
  </button>

变量类名称的语法（或v-if内）

2 个答案: