vant代码实现点击从下弹出选择项选择后显示在前端

以下是一份简单的vant代码实现点击从下弹出选择项，选择后显示在前端的示例：

<template>
  <div>
    <van-cell title="选择项" @click="showPicker" :value="selected"></van-cell>
    <van-picker
      v-model="selected"
      :columns="options"
      @confirm="onConfirm"
      @cancel="onCancel"
      :show-toolbar="true"
      :visible-item-count="5"
    ></van-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3', '选项4', '选项5'],
      selected: '',
    };
  },
  methods: {
    showPicker() {
      this.$refs.picker.show();
    },
    onConfirm(value) {
      this.selected = value;
      this.$refs.picker.hide();
    },
    onCancel() {
      this.$refs.picker.hide();
    },
  },
};
</script>

这个示例中，我们使用了vant的van-cell组件作为选择项的显示框，并在点击事件中打开了van-picker组件来展示可选项。在van-picker中，我们使用了v-model来双向绑定当前选中的选项，在onConfirm方法中将选中的选项赋值给selected变量，在onCancel方法中隐藏van-picker组件。最后，在van-cell的value属性中绑定selected变量以显示当前选中的选项