vue select下拉选择、vue select默认选中

html

<div>
      语言：<select v-model="selectClassEnd" @change="selectClass($event)">
                <option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
                    {{options.title}}
                </option>
       </select>
</div>

js

<script>
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                 selectClassData:[ //类别选择数据或者从后台获取数据
                         {id:1,title:"中文"},
                         {id:2,title:"英文"},
                 ],
                 selectClassEnd:"",//类别默认选择
           }
        },
        methods: {
               //类别选中
               selectClass(event){
                   this.selectClassEnd = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称
                   console.log(this.selectClassEnd)   //打印选中的id
               }
        },
         created(){
               this.selectClassEnd=this.selectClassData[0].id  //这里表示默认选中第一个
        }
    })
</script>   

效果图

 

 

不默选中，添加一个提醒

<select v-model="card" @change="getCard($event)">
    <option style="display: none;" value="" disabled selected>选择证件类型</option>
    <option v-for="(item,index) in data" :value="item.type">
                {{item.name}}
    </option>
</select>

data(){
       return{
           data:[
               {type:"HK",name:"香港来往内地通行证"},
               {type:"CN",name:"中国身份证"}
           ],
           card:""
       }
},
methods:{
       getCard(e){
           this.card = e.target.value; //获取option对应的value值
           console.log("你选中了",this.card)
       }
},