一、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默认选中的功能。根据不同的需求,可以选择不同的方式来实现,默认选中的方式也可以组合使用。