資料獲取簡單例子

create函式會在元件建立完畢後呼叫

<template>
  <div class="post">
    <div v-if="loading">
      Loading
    </div>
    <div v-if="post">
        <h2>{{post.title}}</h2>
        <p>{{post.body}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Post",
  data(){
    return {
      loading:false,
      post:null
    }
  },
  //元件建立完畢
  created() {
    //執行獲取資料
    this.getDate()
  },
  methods:{
    //獲取資料
    getDate(){
      this.loading=true
      //模擬開始獲取資料
      setTimeout(()=>{
        this.loading=false
        this.post={
          title:'標題',
          body:'內容..'
        }
      },1000)
    }
  }
}
</script>

<style scoped>

</style>
 

效果 點選post後會先出現lodaing 資料載入完畢後出現數據

路由滾動

懶載入