mpvue中使用vant時需要注意onChange事件的示例分析

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

創(chuàng)新互聯(lián)專注于費縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都做商城網(wǎng)站。費縣網(wǎng)站建設(shè)公司,為費縣等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

最近用了一下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)店吸粉獲客、會員分層營銷、一機多種收款，告別經(jīng)營低效和客戶流失
 </van-collapse-item>
 <van-collapse-item title="有贊美業(yè)" name="3" disabled>
  線上拓客，隨時預(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)店吸粉獲客、會員分層營銷、一機多種收款，告別經(jīng)營低效和客戶流失
 </van-collapse-item>
 <van-collapse-item title="有贊美業(yè)" name="3" disabled>
  線上拓客，隨時預(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組件里加個監(jiān)聽事件

@change="onChange($event)"

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

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

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

網(wǎng)頁標(biāo)題：mpvue中使用vant時需要注意onChange事件的示例分析
網(wǎng)站地址：http://muchs.cn/article16/ppjedg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、電子商務(wù)、搜索引擎優(yōu)化、移動網(wǎng)站建設(shè)、網(wǎng)站收錄

廣告

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