在vue里使用ul和li标签展示数据，完成分页功能，分页使用原生js实现

好的，下面是在Vue中使用`ul`和`li`标签展示数据并完成分页功能的代码示例，分页使用原生`JavaScript`实现：

<template>
  <div id="page-container">
    <ul id="pagination">
      <li v-for="page in pageCount" :key="page">
        <a href="javascript:void(0)" @click="showPage(page)">{{ page }}</a>
      </li>
    </ul>
    <ul id="data-list">
      <li v-for="item in pageData" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20], // 分页数据
      pageSize: 5, // 每页显示的条目数
      currentPage: 1, // 当前页码
    };
  },
  computed: {
    // 计算总页数
    pageCount() {
      return Math.ceil(this.data.length / this.pageSize);
    },
    // 计算当前页的数据
    pageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.data.slice(start, end);
    },
  },
  methods: {
    // 显示指定页的数据
    showPage(page) {
      this.currentPage = page;
    },
  },
};
</script>

在上面的代码中，我们使用了Vue的计算属性来计算总页数和当前页的数据。在模板中，我们通过`v-for`指令循环生成分页列表和数据列表中的每个元素。在分页列表中，我们给每个页码链接添加了一个`click`事件，点击链接时调用`showPage`方法来显示对应页码的数据。在`showPage`方法中，我们将当前页码赋值给`currentPage`变量，Vue会自动根据`currentPage`的变化重新计算当前页的数据并更新页面。这样，我们就实现了在Vue中使用`ul`和`li`标签展示数据并完成分页功能的效果。