用vue和js来写一个将数据库数据渲染在界面的功能代码

首先，你需要在Vue中安装一个数据库插件，例如axios，来获取数据库中的数据。然后，你可以使用Vue的v-for指令将数据渲染在界面上。

下面是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

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

在这个示例中，我们使用了Vue的v-for指令来循环遍历items数组中的每个对象，并将其渲染为一个列表项。我们使用axios插件来获取数据库中的数据，然后将其存储在Vue的data对象中的items数组中。当组件被挂载时，我们将使用axios来获取数据并更新items数组。