从数据库获取数据，前端页面列表只展示状态为可用的vue

首先，在数据库中需要有一个字段来记录数据的状态，比如可以创建一个名为 status 的字段，值为 0 表示不可用，值为 1 表示可用。

然后，在后端代码中，可以编写一个接口来获取数据库中状态为可用的数据，例如使用 SQL 语句查询：

SELECT * FROM table_name WHERE status = 1;

将查询结果返回给前端。

最后，在前端代码中，可以使用 Vue 框架编写一个列表组件，只展示状态为可用的数据。可以在组件的 created 钩子函数中调用后端接口获取数据，然后使用 v-for 指令渲染列表，同时使用 v-if 指令判断数据的状态是否为可用。示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in items" v-if="item.status === 1">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    // 调用后端接口获取数据
    fetch('/api/getData')
      .then(response => response.json())
      .then(data => {
        this.items = data
      })
  }
}
</script>