从数据库获取数据，判断状态为可用时才展示在前端页面列表vue

好的，你可以按照以下步骤进行操作：

1. 在后端编写 API 接口，用于从数据库中获取数据并根据状态判断是否可用。
2. 在前端使用 Vue 发起请求调用后端接口获取数据。
3. 在 Vue 中使用 v-if 或 v-for 指令来判断数据的状态，只有在状态为可用时才展示在页面列表中。

具体实现步骤如下：

1. 后端 API 接口的实现：

以 Node.js 为例，可以使用 Express 框架编写 API 接口。在 Express 中，通过定义路由来处理客户端的请求。在路由处理函数中，可以使用数据库操作库（如 Sequelize）来查询数据库中的数据。查询出来的数据中，根据状态判断哪些数据是可用的，将可用的数据作为响应返回给客户端。

示例代码：

const express = require('express');
const router = express.Router();
const { Model } = require('sequelize');

router.get('/data', async (req, res) => {
  try {
    const data = await Model.findAll(); // 查询数据库中的数据
    const availableData = data.filter(item => item.status === 'available'); // 过滤可用的数据
    res.json(availableData); // 将可用的数据作为响应返回
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Server error' });
  }
});

module.exports = router;

2. 前端调用后端 API 接口：

在 Vue 中，可以使用 Axios 库来发起 HTTP 请求。在组件的 created 或 mounted 钩子函数中，调用 Axios 发起请求获取后端 API 接口返回的数据。

示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in data" v-if="item.status === 'available'">{{ item.content }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: [],
    };
  },
  created() {
    axios.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

在上述代码中，使用了 v-for 指令来循环渲染数据，并使用 v-if 指令判断数据的状态是否可用。

希望这些信息对你有所帮助！