vue3 根据同一接口不同的返回值 控制多个不同div显示的内容
时间: 2024-04-21 07:27:23 浏览: 10
可以使用 Vue3 中的 Composition API 来实现,具体步骤如下:
1. 在 `setup` 函数中定义一个响应式变量 `response`,并在 `onMounted` 钩子函数中发起请求并更新 `response` 的值。
2. 根据 `response` 的不同值,使用计算属性 `computed` 来返回对应的布尔值,控制多个 div 的显示与隐藏。
示例代码如下:
```
<template>
<div>
<div v-if="isLoading">正在加载中...</div>
<div v-else-if="isSuccess">请求成功的内容</div>
<div v-else-if="isFailed">请求失败的内容</div>
</div>
</template>
<script>
import { reactive, computed, onMounted } from 'vue';
import axios from 'axios';
export default {
setup() {
const response = reactive({
data: null,
loading: false,
error: null
});
onMounted(async () => {
response.loading = true;
try {
const res = await axios.get('https://example.com/api');
response.data = res.data;
} catch (error) {
response.error = error;
} finally {
response.loading = false;
}
});
const isLoading = computed(() => response.loading);
const isSuccess = computed(() => response.data !== null && response.error === null);
const isFailed = computed(() => response.error !== null);
return {
isLoading,
isSuccess,
isFailed
};
}
};
</script>
```
在上述代码中,根据 `response` 的值,使用计算属性 `computed` 来返回对应的布尔值,控制多个 div 的显示与隐藏。其中,`isLoading` 控制正在加载的 div 的显示与隐藏,`isSuccess` 控制请求成功的 div 的显示与隐藏,`isFailed` 控制请求失败的 div 的显示与隐藏。