index.vue 813 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <div>
  3. <van-dropdown-menu>
  4. <van-dropdown-item v-model="value1" :options="option1" />
  5. <van-dropdown-item v-model="value2" :options="option2" />
  6. </van-dropdown-menu>
  7. </div>
  8. </template>
  9. <script>
  10. import Vue from 'vue';
  11. import { DropdownMenu, DropdownItem } from 'vant';
  12. Vue.use(DropdownMenu);
  13. Vue.use(DropdownItem);
  14. export default {
  15. name: 'DropdownMenu',
  16. data() {
  17. return {
  18. value1: 0,
  19. value2: 'a',
  20. option1: [
  21. { text: '全部商品', value: 0 },
  22. { text: '新款商品', value: 1 },
  23. { text: '活动商品', value: 2 },
  24. ],
  25. option2: [
  26. { text: '默认排序', value: 'a' },
  27. { text: '好评排序', value: 'b' },
  28. { text: '销量排序', value: 'c' },
  29. ],
  30. }
  31. }
  32. }
  33. </script>