<p>Saya ingin menunjukkan animasi pemuatan apabila imej dimuatkan, tetapi saya tidak tahu bagaimana untuk mencapainya. <br /><br />Walaupun tiada pemuat, saya nyahpepijat dan "true" dan "false" telah dipaparkan pada konsol, tetapi masih tiada animasi pemuatan muncul. </p><p><br /></p> <pre class="brush:php;toolbar:false;"><template> <div class="KingOfMountain"> <Spinner v-if="isLoading"/> //// RALAT <div v-else class="container"> <div v-if="!isEndGameKing" class="choices"> <p id="skor">{{ currentCountKing }}/{{ ALL_FILMS.length - 1 }} <p/> <div class="photos"> <div class="first__film"> <img :src="firstFilm.Poster" :alt="firstFilm.title" @click="chooseLeftFilm"> <p id="title--filem">{{ firstFilm.title }}</p> </div> <div class="second__filem"> <img :src="secondFilm.Poster" :alt="secondFilm.title" @click="chooseRightFilm"> <p id="title--filem">{{ secondFilm.title }}</p> </div> </div> </div> <div v-else class="winner"> <p id="winner--title">Победитель</p> <img :src="firstFilm.Poster" :alt="firstFilm.title"> </div> </div> </div> </template> <skrip> import permainan daripada "@/mixins/game"; import Spinner daripada "@/components/Spinner/Spinner"; //semua baik dalam css . ianya berfungsi eksport lalai { nama: "KingOfMountain", data() { kembali{ isLoading:false } }, komponen: {Spinner}, kaedah: { pilihLeftFilm() { this.isLoading=true this.redirectToResultKing() // ia adalah kaedah dalam mixin (semua Baik, ia berfungsi) this.isLoading=false }, chooseRightFilm() { this.isLoading=true this.firstFilm = this.secondFilm; this.redirectToResultKing() // ia adalah kaedah dalam mixin (semua Baik, ia berfungsi) this.isLoading=false } }, } </script></pre> <p>如果我像这样使用，它会显示加载动画：</p> <pre class="brush:php;toolbar:false;">chooseLeftFilm() { this.isLoading=true this.redirectToResultKing() // ia adalah kaedah dalam mixin (semua Baik, ia berfungsi) },</pre> <p>// ia akan berputar selama-lamanya</p> <p>帮我，如何更好地制作加载动画？</p> <p>我的混入（campuran）:</p> <pre class="brush:php;toolbar:false;">eksport lalai { kaedah: { kemas kiniFilem() { // Di sini saya mengambil 2 imej secara rawak daripada Vuex dan kemudiannya padam dan sebagainya... this.currentCountKing++; this.allFilmsKingCopy = this.allFilmsKingCopy.filter(val => val !== this.secondFilm) this.secondFilm = this.allFilmsKingCopy[Math.floor(Math.random() * this.allFilmsKingCopy.length)] }, redirectToResultKing() { if (this.currentCountKing === this.ALL_FILMS.length - 1) { this.isEndGameKing = benar } lain { this.updateFilm() } } }, dikira: { ...mapGetters(['SEMUA_FILEM']), },</pre> <p>我的 Vuex:</p> <pre class="brush:php;toolbar:false;">eksport lalai { nyatakan: { filem: [], }, tindakan: { async getFilms({commit}) { data const = tunggu pengambilan(URL); const dataResponse = menunggu data.json(); const films=dataResponse.data commit("setData", filem) }, }, mutasi: { setData(keadaan, filem) { negeri.filem = filem }, }, pengambil: { SEMUA_FILEM(negeri) { negeri balik.filem }, } }</pre> <p><br /></p>

const imgUrl = 'https://picsum.photos/200?random='
let imgCount = 0

const App = {
  template: `
    <div style="display: flex;">
      <div>
        <button @click="loadImage">Load new image</button>
      </div>
      <div v-if="isLoading">LOADING....</div>
      <img :src="src"/>
    </div>
  `,
  data() {
    return {
      isLoading: false,
      src: null,
    }
  },
  methods: {
    async loadImage() {
      this.src = null
      this.isLoading = true
      const img = new Image()
      img.src = imgUrl + imgCount++
      await new Promise(resolve => img.onload = resolve)
      this.src = img.src
      this.isLoading = false
    }
  },
  created() {
    this.loadImage()
  },
}
Vue.createApp(App).mount('#app')

<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>