60 lines
4.0 KiB
Vue
60 lines
4.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="card-list">
|
|||
|
|
<view class="card" v-for="(item, index) in cardList" :key="index">
|
|||
|
|
<!-- 卡片内容，同上 -->
|
|||
|
|
<view class="card-content">
|
|||
|
|
<text class="card-title">{{ item.title }}</text>
|
|||
|
|
<text class="card-description">{{ item.description }}</text>
|
|||
|
|
<button class="card-button" @click="handleButtonClick">操作</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
cardList: [
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
|
|||
|
|
// 其他卡片数据...
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleButtonClick(event) {
|
|||
|
|
// 处理按钮点击事件
|
|||
|
|
console.log('按钮被点击', event);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|