<select name="exampleSelect"> <option value="option1">选择项1</option> <option value="option2">选择项2</option> </select>用vue 和div标签做出这些功能

在Vue.js中，你可以使用v-model指令来双向绑定下拉列表的选择，并且通过`v-bind:class`或者`:class`来控制选项的样式。下面是一个简单的例子：

<div id="app">
  <select v-model="selectedOption" @change="handleChange">
    <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.text }}</option>
  </select>
</div>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { text: '选择项1', value: 'option1' },
        { text: '选择项2', value: 'option2' }
      ]
    };
  },
  methods: {
    handleChange(event) {
      console.log('选项已更改:', event.target.value);
    }
  }
};
</script>

在这个例子中，`v-model`绑定了`selectedOption`数据属性，`options`数组包含了所有的选项。每当用户从下拉列表中选择新的选项，`handleChange`方法会被触发并打印出所选的值。

如果你想直接用普通div模拟下拉效果，可以考虑使用第三方库如Element UI、Ant Design Vue等，它们提供了丰富的下拉组件。如果没有库，可以自己用JavaScript监听事件来切换显示内容，但这相对复杂些。