一 按需引入

import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu);
Vue.use(DropdownItem)

二 在页面html写入

基础用法
<van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
</van-dropdown-menu>
export default {
  data() {
    return {
      value1: 0,
      option1: [
        { text: '广东', value: 0 },
        { text: '山东', value: 1 },
        { text: '北京', value: 2 },
      ],
    };
  },
};

假如是这样的话那么下拉框就会默认显示第一个字眼“广东”，比如我们想展示的是地区两个字作为标题,那就必须把地区放在第一位,但是我们在做项目中后端是不会传地区这两个的给到我们, 我们要返回给后台的字段里面根本就不会有地区这一区域。
如果想要一开始就显示请地区这样的提示字眼，那么我们可以去看看vant的api文档，发现有一个title的字眼，这个title就是下拉框的显示文字，一开始很多人以为这个下拉框的title只是用来显示然后点击下拉框的item之后会自动绑定过的，但其实是错误的，以下就是一个很好的例子

基础用法
<van-dropdown-menu>
  <van-dropdown-item :title='title'  v-model="value1" :options="option1" />
</van-dropdown-menu>
export default {
  data() {
    return {
      value1: 0,
       title: '地区',
      option1: [
        { text: '广东', value: 1  },
        { text: '山东', value: 2 },
        { text: '北京', value: 3 },
      ],
    };
  },
};

但是这样你会发现你绑定了title 之后你选择的任何值都不会重新赋值给title 无法正确的展示用户所选择的值 一旦你自己使用title进行绑定，那么每次修改时就要修改title，查看vant api可以发现有change事件，接下来就可以操作了

基础用法
<van-dropdown-menu>
  <van-dropdown-item :title='title'  v-model="value1" @change='handelChange' :options="option1" />
</van-dropdown-menu>
export default {
  data() {
    return {
      value1: 0,
       title: '地区',
      option1: [
        { text: '广东', value: 1 },
        { text: '山东', value: 2 },
        { text: '北京', value: 3 },
      ],
    };
  },
methods:{
// change事件可以拿到的是value  
handelChange(value){
    this.title = this.option1[value-1].text
   // 这样的话我们可以通过这个方法改变tiele值 
}
}
};

问题来了,如果后端返回给你的value值不是按照1,2,3,4,5返回给你而是0010,0020,0030,0040, 那我们用上面的方法去重新赋值title就会报错, 因为上面的value-1就得不到对应的索引 这时候我们就可以用数组filter的方法

// change事件可以拿到的是value  
handelChange(value){
  console.log(this.option1.filter(item => item.value === value)[0].text )
// 这里打印出来的值就是我们想要的text
this.title=this.option1.filter(item => item.value === value)[0].text
   // 这样的话我们可以通过这个方法改变tiele值 
}