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

• Z时代
• 2024-01-10
• 分类：综合

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>   

效果图

以上是 vue select下拉选择、vue select默认选中 的全部内容， 来源链接： utcz.com/z/380479.html