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> |