mpvue中使用vant時(shí)需要注意onChange事件的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下mpvue中使用vant時(shí)需要注意onChange事件的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主營喀什網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),喀什h5成都小程序開發(fā)搭建,喀什網(wǎng)站營銷推廣歡迎喀什等地區(qū)企業(yè)咨詢

最近用了一下Vant Weapp組件庫，但是由于我是用mpvue寫的，所以自然跟小程序引用不一樣，比如我最近引用了vant里面的collapse折疊面板，官網(wǎng)文檔里面介紹的使用方法是這樣的

1.在 app.json 或 index.json 中引入組件

"usingComponents": {
 "van-collapse": "path/to/vant-weapp/dist/collapse/index",
 "van-collapse-item": "path/to/vant-weapp/dist/collapse-item/index"
}

2.通過value控制展開的面板列表，activeNames為數(shù)組格式

<van-collapse value="{{ activeNames }}">
 <van-collapse-item title="有贊微商城" name="1">
  提供多樣店鋪模板，快速搭建網(wǎng)上商城
 </van-collapse-item>
 <van-collapse-item title="有贊零售" name="2">
  網(wǎng)店吸粉獲客、會(huì)員分層營銷、一機(jī)多種收款，告別經(jīng)營低效和客戶流失
 </van-collapse-item>
 <van-collapse-item title="有贊美業(yè)" name="3" disabled>
  線上拓客，隨時(shí)預(yù)約，貼心順手的開單收銀
 </van-collapse-item>
</van-collapse>

Page({
 data: {
  activeNames: ['1']
 },
 onChange(event) {
  this.setData({
   activeNames: event.detail
  });
 }
});

但是在mpvue里面不能直接這樣引入

下面是我的代碼

<van-collapse :value="activeNames" @change="onChange($event)">
 <van-collapse-item title="有贊微商城" name="1">
  提供多樣店鋪模板，快速搭建網(wǎng)上商城
 </van-collapse-item>
 <van-collapse-item title="有贊零售" name="2">
  網(wǎng)店吸粉獲客、會(huì)員分層營銷、一機(jī)多種收款，告別經(jīng)營低效和客戶流失
 </van-collapse-item>
 <van-collapse-item title="有贊美業(yè)" name="3" disabled>
  線上拓客，隨時(shí)預(yù)約，貼心順手的開單收銀
 </van-collapse-item>
</van-collapse>

export default {
 data () {
  return {
   activeName: '1'
  }
 },
 methods: {
  onChange (event) {
   console.log(event)
   this.activeName = event.mp.detail
  }
 }
}

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

首先是數(shù)據(jù)綁定方式

value="{{activeNames}}"

改為

v-bind:value="activeNames"
//或者
:value="activeNames"

然后是事件監(jiān)聽

在van-collapse組件里加個(gè)監(jiān)聽事件

@change="onChange($event)"

mpvue中獲取event值也與原生小程序有所不同：

onChange(event){ // 獲取表單組件filed的值
 console.log(event.mp.detail) // 注意加入mp
}

以上是“mpvue中使用vant時(shí)需要注意onChange事件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：mpvue中使用vant時(shí)需要注意onChange事件的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article36/cddcsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站導(dǎo)航、面包屑導(dǎo)航、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)