1、創(chuàng)建vue項目

2、使用vant組件

npm install vant --S

全局引用時在main.js引入

import Vant from ’vant’;import ’vant/lib/index.css’;Vue.use(Vant);

假如你引入之后發(fā)現(xiàn)頁面的樣式和組件都掛載了，但是console控制臺會報錯，說xxxx組件沒有register,這個時候很有可能是你的vant插件版本有問題，重新下載一個最新的vant就可以了，現(xiàn)在是2.6.0版本

好，接下來繼續(xù)

在需要使用下拉框的地方使用下拉框組件

<van-dropdown-menu> <van-dropdown-item v-model='value' :options='developList' /></van-dropdown-menu> data () { return { value: ’’ developList: [ { value: ’1’, text: ’我是第一個’ }, { value: ’2’, text: ’我是第二個’ }, ] }}

假如是這樣的話那么下拉框就會默認(rèn)顯示第一個字眼“wishing第一個”，然后你在點擊下拉框選擇第二個時也會改變成“我是第二個”

如果你不想有默認(rèn)選中，并且一開始就顯示請選擇這樣的提示字眼，那么我們可以去看看vant的api文檔，發(fā)現(xiàn)有一個title的字眼，這個title就是下拉框的顯示文字，一開始很多人以為這個下拉框的title只是用來顯示然后點擊下拉框的item之后會自動綁定過的，但其實是錯誤的，以下就是一個很好的例子

<van-dropdown-menu> <van-dropdown-item v-model='value' :disabled='disabled' :options='developList' /></van-dropdown-menu> data () { return { value: ’’ developList: [ { value: ’1’, text: ’我是第一個’ }, { value: ’2’, text: ’我是第二個’ }, ] }}

你會發(fā)現(xiàn)請選擇的自然從來沒變過，無論你選擇了第一個還是第二個，那么你就會想title是不是綁定，接下來就有以下操作

<van-dropdown-menu> <van-dropdown-item :title='title' v-model='value' :disabled='disabled' :options='developList' /></van-dropdown-menu> data () { return { value: ’’ title:’’請選擇, developList: [ { value: ’1’, text: ’我是第一個’ }, { value: ’2’, text: ’我是第二個’ }, ] }}

加下來發(fā)現(xiàn)還是沒有改動啊，那是不是綁定的值沒有發(fā)生改變了，好像是的，因為你值定義了這個title,這個title就是下拉框選擇的顯示，只是你沒有title的時候vant把你選擇的text文字映射到title上去了，一旦你自己使用title進行綁定，那么每次修改時就要修改title，查看vant api可以發(fā)現(xiàn)有change事件，接下來就可以操作了

<van-dropdown-menu> <van-dropdown-item :title='title' v-model='value' :options='developList' @change='changeDevelop' /></van-dropdown-menu> data () { return { value: ’’ title:’’請選擇, developList: [ { value: ’1’, text: ’我是第一個’ }, { value: ’2’, text: ’我是第二個’ }, ] }}, methods: { changeDevelop (i) { this.title = this.developList[i-1].text },}

這就沒問題啦！

以上這篇解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。