Vue-接口返回的值在页面上显示

 1 <template>
 2  /* 在页面上显示ress的内容 */
 3  <div>{{ ress }}</div>
 4 </template>
 5 
 6 <script>
 7 /* Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块 */
 8 /* 引入CopyData模块 */
 9 
10 import { CopyData } from '@/api/manage'
11 
12 /* export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，
13     这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入 
14 */
15 /* export 和export default 的区别在于：export 可以导出多个命名模块 */
16 export default {
17   name: 'ApiAutoList',
18   mixins: [JeecgListMixin],
19   /* 通过Vue.component也可以全局注册组件，不需要每次new vue的时候单独注册 */
20   components: {
21   },
22   data() {
23     return {
24       description: '接口自动化',
25       ress:'',
26     }
27   },
28   computed: {
29     importExcelUrl: function () {
30       return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
31     },
32   },
33   methods: {
34     handleCopy() {
35      // 调用CopyData模块去调用接口
36       CopyData().then((res) => {
37         if (res.success) {
38         //将res赋值给ress
39         this.ress=res
40         }
41       })
42     },
43   },
44   created() {
45   //调用handleCopy模块
46     this.handleCopy()
47   },
48 }
49 </script>
50 <style scoped>
51 @import '~@assets/less/common.less';
52 </style>
沫笙