Vue-接口返回的值在頁面上顯示

 

<template>
 /* 在頁面上顯示ress的內容 */
 <div>{{ ress }}</div>
</template>

<script>
/* Vue 是通過 webpack 實現的模塊化，因此可以使用 import 來引入模塊 */
/* 引入CopyData模塊 */

import { CopyData } from '@/api/manage'

/* export 用來導出模塊，Vue 的單文件組件通常需要導出一個對象，
    這個對象是 Vue 實例的選項對象，以便於在其它地方可以使用 import 引入 
*/
/* export 和export default 的區別在於：export 可以導出多個命名模塊 */
export default {
  name: 'ApiAutoList',
  mixins: [JeecgListMixin],
  /* 通過Vue.component也可以全局注冊組件，不需要每次new vue的時候單獨注冊 */
  components: {
  },
  data() {
    return {
      description: '接口自動化',
      ress:'',
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    handleCopy() {
     // 調用CopyData模塊去調用接口
      CopyData().then((res) => {
        if (res.success) {
        //將res賦值給ress
        this.ress=res
        }
      })
    },
  },
  created() {
  //調用handleCopy模塊
    this.handleCopy()
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>