<template>
<div>
<!-- 使用 van-card 组件 -->
<van-card
num="2"
desc="描述信息"
title="商品标题"
price="100"
thumb="https://example.com/thumb.jpg"
/>
</div>
</template>
<script>
export default {
// 这里可以添加组件的其他配置和逻辑
};
</script>
在上述代码中：
- num 属性用于显示数量，可以是数字或字符串。
- desc 属性用于显示描述信息。
- title 属性用于显示标题。
- price 属性用于显示价格。
- thumb 属性用于显示卡片的缩略图。
你可以根据自己的需求配置这些属性，以适应不同的卡片内容。此外，van-card 组件还支持更多的配置，比如插槽（slot）来自定义内容、自定义样式等。
确保在使用 van-card 组件前，你的项目中已经正确引入了 Vant 组件库。如果你的项目中还没有引入 Vant，你需要先安装 Vant，并在需要使用的地方引入样式和组件。
npm install vant
然后在需要使用的地方引入：
import 'vant/lib/index.css';
import { Card } from 'vant';
Vue.use(Card);
转载请注明出处：http://www.zyzy.cn/article/detail/5706/Vant