首先，确保你已经引入了Vant 4和Vue.js。你可以通过在HTML文件中引入相关的CSS和JavaScript文件，或者通过npm安装并在Vue组件中引入。
然后，在你的Vue组件中，可以使用以下代码来创建一个基本的Vant宫格：
<template>
<div>
<van-grid :column-num="3">
<van-grid-item v-for="(item, index) in gridData" :key="index">
<!-- 这里放置宫格项的内容 -->
{{ item.text }}
</van-grid-item>
</van-grid>
</div>
</template>
<script>
export default {
data() {
return {
gridData: [
{ text: '宫格项1' },
{ text: '宫格项2' },
{ text: '宫格项3' },
// 可以根据需要添加更多的宫格项
],
};
},
};
</script>
上述代码中，<van-grid> 表示宫格的容器，<van-grid-item> 则表示每个宫格项。通过遍历数据数组 gridData，我们动态生成了多个宫格项。
请注意，:column-num="3" 表示每行显示3列，你可以根据实际需要调整这个值。
另外，你可以根据实际需求在 <van-grid-item> 中添加自定义的内容，比如图片、链接等。
转载请注明出处：http://www.zyzy.cn/article/detail/5847/Vant