vue3 根据后端状态码 控制前端显示的div

在Vue3中，你可以使用`v-if`或`v-show`指令根据后端状态码控制前端显示的div。

首先，你需要在Vue组件中定义一个变量来保存后端状态码。例如：

<template>
  <div>
    <!-- 其他内容 -->
    <div v-if="statusCode === 200">
      <!-- 显示的内容 -->
    </div>
    <div v-else>
      <!-- 错误提示信息 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusCode: 0 // 默认为0，表示未收到后端响应
    }
  },
  methods: {
    fetchData() {
      // 发送请求获取后端响应
      // ...
      // 更新状态码
      this.statusCode = response.status
    }
  }
}
</script>

在上述代码中，`v-if`指令根据`statusCode`的值来控制内容的显示和隐藏。如果状态码为200，则显示正常内容，否则显示错误提示信息。

在组件的`fetchData`方法中，你可以发送请求并在响应后更新`statusCode`的值。这样，当后端响应时，组件会自动重新渲染。

如果你只需要根据状态码显示或隐藏一个div，可以使用`v-show`指令，它不会将div从DOM中删除，而是只是将其隐藏起来。用法和`v-if`基本相同，只需要将`v-if`替换为`v-show`即可。