Vue中select的使用

最新推荐文章于 2025-11-17 17:03:39 发布

原创最新推荐文章于 2025-11-17 17:03:39 发布 · 3.2w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Millia‘s work 专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的自定义下拉选择框样式和功能的方法，包括如何设置样式使其更加美观，以及如何通过监听事件来获取用户的选择。

效果：

HTML：

<div class="sel01">
    <select v-model="selectClassEnd" @change="selectClass($event)">
        <option value="NONE">未选择</option>
        <option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
            {{options.title}}
        </option>
    </select>
</div>

CSS：

.sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
.sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
.sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
.sel01 select:focus{outline:none;}

JS：

export default {
    name:"Name",
    data(){
      return{
        selectClassData:[ //类别选择数据或者从后台获取数据
          {id:1,title:"科普类"},
          {id:2,title:"亲子类"},
          {id:3,title:"制作类"},
          {id:4,title:"创意类"}
        ],
        selectClassEnd:"NONE",//类别默认选择
        select_class_id:"",//类别id提交报名需要
      }
    },
    methods:{
     //类别选中
     selectClass(event){
      this.select_class_id = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称
     },
    }

}