Vue中select的使用

最新推荐文章于 2024-09-13 09:35:09 发布

米柆

最新推荐文章于 2024-09-13 09:35:09 发布

阅读量3.2w

点赞数 15

分类专栏： Millia's work 文章标签： vue

本文链接：https://blog.csdn.net/millia/article/details/107717059

版权

Millia's work 专栏收录该内容

58 篇文章 4 订阅

订阅专栏

效果：

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是后台约定的提交数据的名称
     },
    }

}