判断当状态为可用时展示在列表vue

在 Vue 中，可以通过 v-if 指令来根据状态来判断是否展示在列表中。例如：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id" v-if="item.status === 'available'">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', status: 'available' },
        { id: 2, name: 'Item 2', status: 'unavailable' },
        { id: 3, name: 'Item 3', status: 'available' },
        { id: 4, name: 'Item 4', status: 'unavailable' },
      ],
    };
  },
};
</script>

在上面的代码中，v-for 指令用来循环列表项，v-if 指令用来判断状态是否为可用，只有可用状态的列表项才会展示出来。

相关问题

从数据库获取数据，判断状态为可用时才展示在前端页面列表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 指令判断数据的状态是否可用。

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

从数据库获取数据，前端页面列表只展示状态为可用的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>