mpvue中使用vant时需要注意onChange事件的示例分析 - 行业资讯

　　介绍

小编给大家分享一下mpvue中使用vant时需要注意onChange事件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

最近用了一下vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面崩溃的折叠面板,官网文档里面介绍的使用方法是这样的

1。在app.json或索引。json中引入组件

“usingComponents":, { 　　,“van-collapse":“路径//vant-weapp/dist//index"崩溃,, 　　,“van-collapse-item":“路径//vant-weapp/dist/collapse-item/index" 　　}

2。通过价值控制展开的面板列表,activeNames为数组格式

& lt; https://www.yisu.com/zixun/van-collapse 价值=" {{activeNames}} "> 　　　　提供多样店铺模板,快速搭建网上商城　　　　　　网店吸粉获客,会员分层营销,一机多种收款,告别经营低效和客户流失　　　　　　线上拓客,随时预约,贴心顺手的开单收银　　　　页面({ 　　,数据:{ 　　,,activeNames: [& # 39; 1 & # 39;] 　　}, 　　,onChange(事件){ 　　this.setData({才能　　,,activeNames: event.detail 　　,,}); 　　,} 　　});

但是在mpvue里面不能直接这样引入

下面是我的代码

& lt; van-collapse :价值=https://www.yisu.com/zixun/癮ctiveNames”@change=" onChange事件($)"> 　　　　提供多样店铺模板,快速搭建网上商城　　　　　　网店吸粉获客,会员分层营销,一机多种收款,告别经营低效和客户流失　　　　　　线上拓客,随时预约,贴心顺手的开单收银　　　　 export default { 　　,data (), { 　　return {才能　　,,,activeName: & # 39; 1 & # 39; 　　,,} 　　}, 　　,方法:{ 　　onChange 才能;(事件),{ 　　,,console.log(事件) 　　,,this.activeName =event.mp.detail 　　,,} 　　,} 　　}

得把原生小程序使用方式为改为mpvue使用方式

首先是数据绑定方式

value=https://www.yisu.com/zixun/{{activeNames}} "

改为

v-bind: value=https://www.yisu.com/zixun/癮ctiveNames”//或者　　:价值=" activeNames "

<强>然后是事件监听

在van-collapse组件里加个监听事件

@change=皁nChange事件($),

mpvue中获取事件值也与原生小程序有所不同:

onChange(事件){//大敌;获取表单组件提交的值　　,console.log (event.mp.detail),//,注意加入mp 　　}

以上是“mpvue中使用vant时需要注意onChange事件的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!