MiniProjectX/vue3-vuetify3-typescript-blog-system/page1.vue

<template>
  <v-container class="bg-surface-variant mb-6">
    <v-row>
      <v-col v-for="(item, index) in imgArr" :key="index" cols="4">
        <v-card>
          <v-img :src="item" cover aspect-ratio="16/9">
          </v-img>
        </v-card>
      </v-col>
    </v-row>

    <v-row>
      <v-col v-for="(item, index) in dataArr" :key="index" cols="2">
        <v-card max-width="200" max-height="300" variant="tonal">
          <v-card>
            <v-img :src="item.img" height="100px" cover aspect-ratio="16/9">
            </v-img>
          </v-card>
          <v-card-item>
            <div>
              <div>
                <p style="font-size: 12px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;">{{ item.title }}</p>
              </div>
            </div>
          </v-card-item>
          <v-card-subtitle>
            <p style="font-size: 5px;"> {{ item.subtile }}</p>
          </v-card-subtitle>
        </v-card>
      </v-col>
    </v-row>
    <br><br>
    <v-pagination :length="6" rounded="circle" v-model="page" @click="onPageChange()"></v-pagination>
  </v-container>
</template>


<script>
import { reactive , ref } from 'vue'
export default {
  setup() {
    let imgArr = reactive([
    'https://image.gcores.com/b14b6a4b4cc88d5ff8685518923d2f54-1600-900.jpg?x-oss-process=image/resize,limit_1,m_fill,w_717,h_402/quality,q_90/format,webp',
    'https://image.gcores.com/8089eecb20a204ce6b157bdeb66e470d-1600-900.jpg?x-oss-process=image/resize,limit_1,m_fill,w_717,h_402/quality,q_90/format,webp',
    'https://image.gcores.com/43969d1c09ed637f48b558ede508c860-1600-900.png?x-oss-process=image/resize,limit_1,m_fill,w_717,h_402/quality,q_90/format,webp'
    ])

    let dataArr = reactive([
      {
        title: '《守望先锋》“归来”现已成Steam差评率第一的游戏',
        subtile: '我是副标题',
        img: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'
      },
      {
        title: '休闲冒险游戏《美希与猫之岛 -Neko Odyssey-》上线Steam商城页，将于2024年发售',
        subtile: '我是副标题',
        img: 'https://image.gcores.com/03aed77757653235ab200815b828bf0e-460-215.jpg?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
      },
      {
        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
        subtile: '我是副标题',
        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
      },
      {
        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
        subtile: '我是副标题',
        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
      },
      {
        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
        subtile: '我是副标题',
        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
      },
      {
        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
        subtile: '我是副标题',
        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
      },
      {
        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
        subtile: '我是副标题',
        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
      },
      {
        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
        subtile: '我是副标题',
        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
      },
      {
        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
        subtile: '我是副标题',
        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
      },
    ])
    
    let page = ref(1)
    function onPageChange(){

       //dataArr.length = 0
      
       dataArr .push({
        title: '《守望先锋》“归来”现已成Steam差评率第一的游戏',
        subtile: '我是副标题',
        img: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'
      })
       console.log(dataArr)
      console.log(dataArr)
    }

    return {
      dataArr,
      page,
      imgArr,
      onPageChange
    }
  },
}
</script>


<style>

</style>