Vue.js - 如何使用三元运算符在 vue 中返回 html 和字体真棒图标

Question

I have the following in 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>

How would I get it to return the icon instead of showing:

Answer 1

You should use conditional rendering using v-if directive:

   <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>