欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解mpvue中使用vant時需要注意的onChange事件的坑

 更新時間:2019年05月16日 10:18:28   作者:愛吃栗子的小單  
這篇文章主要介紹了詳解mpvue中使用vant時需要注意的onChange事件的坑,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

最近用了一下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ī)多種收款,告別經(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ī)多種收款,告別經(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
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue組件掛載到全局方法的示例代碼

    vue組件掛載到全局方法的示例代碼

    這篇文章主要介紹了vue組件掛載到全局方法的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue實例中data使用return包裹的方法

    vue實例中data使用return包裹的方法

    今天小編就為大家分享一篇vue實例中data使用return包裹的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue3.0列表頁面做緩存的方法代碼

    vue3.0列表頁面做緩存的方法代碼

    很多時候為了讓提高用戶的體驗感,在頁面上添加緩存,是十分有必要的,?下面這篇文章主要給大家介紹了關(guān)于vue3.0列表頁面做緩存的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-04-04
  • Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用

    Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用

    這篇文章主要給大家介紹了關(guān)于Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue CLI3具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • vue嵌套組件傳參實例分享

    vue嵌套組件傳參實例分享

    這篇文章主要介紹了vue嵌套組件傳參實例分享,本文以一個vue遞歸組件為例,探究多層嵌套后事件無法觸發(fā)的問題,我們可以通過查看一Demo,便于快速了解,下文列舉例子需要的小伙伴可以參考一下
    2022-04-04
  • 適用于 Vue 的播放器組件Vue-Video-Player操作

    適用于 Vue 的播放器組件Vue-Video-Player操作

    這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue大屏自適應(yīng)的實現(xiàn)方法(cv就能用)

    vue大屏自適應(yīng)的實現(xiàn)方法(cv就能用)

    最近在用VUE寫大屏頁面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • vue中$refs, $emit, $on, $once, $off的使用詳解

    vue中$refs, $emit, $on, $once, $off的使用詳解

    這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • 使用vue的v-for生成table并給table加上序號的實例代碼

    使用vue的v-for生成table并給table加上序號的實例代碼

    這篇文章主要介紹了使用vue的v-for生成table并給table加上序號的相關(guān)資料,需要的朋友可以參考下
    2017-10-10
  • Nginx配置Vue項目,無法按路徑跳轉(zhuǎn)及刷新404的解決方案

    Nginx配置Vue項目,無法按路徑跳轉(zhuǎn)及刷新404的解決方案

    這篇文章主要介紹了Nginx配置Vue項目,無法按路徑跳轉(zhuǎn)及刷新404的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06

最新評論