Vue.js

Question

我在 vue 中有以下内容：

      <div class="pt-2">
        <button
          class="bg-gradient-to-r from-green-100 to-blue-100 rounded p-3 w-full text-xl font-medium focus:outline-none"
          @click="isLoading = true"
          :disabled="isLoading"
        >
          {{isLoading ? '<i class="fas fa-circle-notch fa-spin"></i>' :
          'Register'}}
        </button>
      </div>

我如何才能将其显示为 return 图标而不是显示：

Answer 1

您应该使用 v-if 指令进行条件渲染：

   <div class="pt-2">
        <button
          class="bg-gradient-to-r from-green-100 to-blue-100 rounded p-3 w-full text-xl font-medium focus:outline-none"
          @click="isLoading = true"
          :disabled="isLoading"
        >
          <i v-if="isLoading" class="fas fa-circle-notch fa-spin"></i>
          <span v-else >Register</span
        </button>
      </div>

Vue.js - 如何在 vue 中使用三元运算符 return html 和超棒的字体图标

Vue.js - How to use ternary operator to return html in vue with font awesome icons

javascript

vuejs2

tailwind-css