一、下拉框默认选中某个值
当我们需要在Vue下拉框中默认选中某个值时，可以通过给v-model绑定一个默认值实现：
<template>
<div>
<label>请选择:</label>
<select v-model="selected">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selected: '2' //默认选中选项2
}
}
}
</script>
以上代码中，我们通过在data中设置selected的值为’2’，来实现下拉框默认选中选项2。
二、Vue下拉框默认选中第一个
有时候我们需要在Vue下拉框中默认选中第一个选项，可以直接将v-model绑定为第一个选项的值：
<template>
<div>
<label>请选择:</label>
<select v-model="selected">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selected: '1' //默认选中选项1
}
}
}
</script>
以上代码中，我们将selected的值设置为’1’，来实现默认选中第一个选项。
三、Vue下拉框默认值设置
除了直接在data中设置selected的值来实现默认选中某个选项外，也可以通过计算属性来实现默认值的设置。
<template>
<div>
<label>请选择:</label>
<select v-model="selected">
<option v-for="(option, index) in options" :key="index" :value="option">{{ option }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '选项2',
options: ['选项1', '选项2', '选项3']
}
},
computed: {
selected() { //计算属性
return this.options.indexOf(this.selectedOption) !== -1 ? this.selectedOption : this.options[0];
}
}
}
</script>
以上代码中，我们在data中定义了一个selectedOption的值为’选项2’，在options中定义了下拉框中的所有选项。在计算属性中，我们判断selectedOption是否存在于options中，如果存在则返回selectedOption的值，如果不存在，则返回第一个选项的值。这样就实现了默认选中某个选项的效果。
四、总结
Vue下拉框默认选中某个值非常简单，我们可以直接在data中设置selected的值为要选中的选项的value，也可以通过计算属性来实现。除此之外，Vue默认选中第一个选项也很方便，直接将selected的值设置为第一个选项的value即可。希望本文对Vue下拉框默认选中某个值有所帮助。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/312747.html
微信扫一扫 
支付宝扫一扫 