暑期实训log4

最新推荐文章于 2021-07-30 21:40:36 发布

令狐志超

最新推荐文章于 2021-07-30 21:40:36 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/weixin_43979794/article/details/118653010

版权

搭建饮食推荐的界面。

成果是这样的
index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>饮食推荐</title>
  <link rel="stylesheet" href="./lib/bootstrap-icons.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="app" class="app" style="display: none">
  <div class="box">
    <div class="header" style="border-bottom: 1px solid #ddd">
      <div class="user_area">
        <i class="bi bi-person-circle"></i>
        <span>{{username}}</span>
      </div>
    </div>
    <div class="header">
      <div class="user_area">
        <span>饮食推荐</span>
      </div>
      <div class="right">
        共{{list.length}}篇
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="item in showList" :key="item.name">
          <div class="left">
          <img class="logo" :src="`./img/${item.img}`" alt="">
        </div>
        <div class="right">
          <div class="name">{{item.name}}</div>
          <div class="tags" >
            <span class="tag" v-for="tag in item.materials" :key="tag">{{tag}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="paging">
      <span v-for="i in pages" :key="i" @click="page = i">
        {{i}}
      </span>
      <span v-if="page > 1" @click="page = page - 1">上一页</span>
      <span v-if="page < totalPage" @click="page = page + 1">下一页</span>
    </div>
  </div>
</div>
<script src="lib/vue.global.js"></script>
<script src="js/data1.js"></script>
<script>
const App = {
  data() {
    return {
      username: "客户001", // 用户名
      list: window.data, // 列表数据
      pageSize: 6, // 一页条数
      page: 1, // 当前页码
    }
  },
  computed: {
    totalPage() { // 总页数
      return Math.ceil(this.total / this.pageSize)
    },
    total() { // 总条数
      return this.list.length
    },
    pages() { // 页码列表
      let res = []
      for (let i = 0; i < this.totalPage; i++) {
        res.push(i + 1)
      }
      return res
    },
    showList() { // 当前页显示的菜谱
      let temp = [...this.list]
      return temp.splice((this.page - 1) * this.pageSize, this.pageSize)
    }
  },
  created() {
    // 避免vue挂载之前渲染页面
    document.getElementById('app').style.display = 'block'
  }
}

Vue.createApp(App).mount('#app')
</script>
</body>
</html>