千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > VueSelect默认选中用法介绍

VueSelect默认选中用法介绍

来源:千锋教育
发布人:xqq
时间: 2023-11-25 12:57:24 1700888244

一、v-model和default-value属性

VueSelect可以通过使用v-model或default-value属性来实现默认选中。v-model属性可以通过双向绑定来实现默认选中,将v-model的值设置为默认选项的值即可,如下:


    
    


这样,Option 1将默认选中。default-value属性同样可以实现默认选中,但它是一个非双向绑定属性,只能设置初始值,如下:


    
    

这样,Option 2将默认选中。

二、selected和option的default属性

VueSelect中的selected和option属性都有default属性,可以用来实现默认选中。在selected和option标签中添加default属性,设置为true即可:


    Option 1
    
    


这样,Option 1将默认选中。同样的,option标签也可以使用default属性来实现默认选中,如下:


    Choose an option
    
    
    


这样,Option 2将默认选中。

三、通过ref属性设置默认选中

也可以通过Vue的ref属性来设置默认选中。在VueSelect标签中添加ref属性,然后通过this.$refs来访问到该VueSelect实例,然后再设置选中的value值即可实现:


    
    


这样,Option 2将默认选中。

四、使用计算属性设置默认选中

还可以通过计算属性来设置默认选中,将v-model绑定到该计算属性即可。在计算属性中,可以返回默认选中的值或者根据某些条件来返回默认选中的值,如下:


    


这样,如果options数组中包含"option2"选项,那么Option 2将默认选中。

五、结论

通过上面的方式,我们可以实现VueSelect默认选中的功能。根据不同的需求,可以选择不同的方式来实现,默认选中的方式也可以组合使用。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT