vantUI组件:van-card 自定义内容 - 踩坑篇

vantUI组件:van-card 自定义内容 - 踩坑篇


特别说明:

自定义用法,格式必须:

<van-card>
	<template #tags> 
		····自定义内容·· 
	</template>
</van-card>

必须在它的标签中间位置自定义代码。


自定义内容

 <section>
   <van-card class="s-card">
     <template #tags>
       <van-image
         round
         width="65px"
         height="65px"
         fit="cover"
         lazy-load
         src="https://img.yzcdn.cn/vant/cat.jpeg"
         alt="缺省图"
       />
       <p>秋天的风 </p>
       <p>180****2258</p>
     </template>
   </van-card>
 </section>

以上就是关于“vantUI组件:van-card 自定义内容 - 踩坑篇” 的全部内容。

你可以在`<van-sidebar>`标签上添加`@change`事件监听器来实现索引切换时更新右侧布局的功能。具体实现如下: 1. 在`data`中定义需要切换的数据,以及当前选中的索引值: ```javascript data() { return { activeKey: 0, // 当前选中的索引值 racketList: [ // 不同索引对应的数据 { id: 1, name: '新手球拍', desc: '适合初学者使用的球拍' }, { id: 2, name: '进阶球拍', desc: '适合有一定基础的球员使用的球拍' }, { id: 3, name: '高级球拍', desc: '适合专业球员使用的球拍' } ], currentRacket: {} // 当前选中的球拍数据 } } ``` 2. 在模板中,使用`<van-sidebar-item>`标签渲染侧边栏,并绑定`activeKey`作为选中的索引值: ```html <van-sidebar v-model="activeKey" fixed="false"> <van-sidebar-item title="新手球拍" /> <van-sidebar-item title="进阶球拍" /> <van-sidebar-item title="高级球拍" /> </van-sidebar> ``` 3. 在模板中,使用`<van-card>`标签渲染右侧的布局,并根据当前选中的索引值显示对应的数据: ```html <van-card> <div class="card-content">{{ currentRacket.name }}</div> <div class="card-content">{{ currentRacket.desc }}</div> </van-card> ``` 4. 在`<script>`标签中,定义`onChange`方法来更新选中的索引值,并根据索引值更新右侧的数据: ```javascript methods: { onChange(index) { this.activeKey = index; // 更新选中的索引值 this.currentRacket = this.racketList[index]; // 更新右侧的数据 } } ``` 5. 在`<van-sidebar>`标签上添加`@change`事件监听器,将事件绑定到`onChange`方法上: ```html <van-sidebar v-model="activeKey" fixed="false" @change="onChange"> <van-sidebar-item title="新手球拍" /> <van-sidebar-item title="进阶球拍" /> <van-sidebar-item title="高级球拍" /> </van-sidebar> ``` 这样,当用户点击侧边栏的不同项时,就会触发`@change`事件,从而更新选中的索引值和右侧的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值