vue根据后端返回的list设置下拉选择框
时间: 2023-10-02 18:07:04 浏览: 107
vue实现的下拉框功能示例
5星 · 资源好评率100%
假设后端返回的数据格式为一个数组,数组中每个元素都包含一个 `value` 和 `label` 属性,那么可以通过 `v-for` 指令循环遍历数组,然后使用 `v-bind` 指令将每个选项的 `value` 和 `label` 属性绑定到下拉选择框中。
示例代码如下:
```
<template>
<div>
<label for="select">选择框:</label>
<select id="select" v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.label }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
options: [], // 后端返回的数据
selected: null // 当前选中的值
}
},
mounted() {
// 发送请求获取后端数据
this.$http.get('/api/options').then(response => {
this.options = response.data
})
}
}
</script>
```
在上面的代码中,`options` 数组是从后端返回的数据,`selected` 属性用来存储当前选中的值。在 `mounted` 钩子函数中,使用 `this.$http.get` 方法发送请求获取后端数据,并将返回的数据赋值给 `options` 数组。
在模板中,使用 `v-for` 指令循环遍历 `options` 数组,将每个选项的 `value` 和 `label` 属性绑定到下拉选择框中,其中 `:value="option.value"` 表示将 `option.value` 绑定到 `value` 属性上,`{{ option.label }}` 表示将 `option.label` 显示在选项文本中。最后,使用 `v-model` 指令将选中的值绑定到 `selected` 属性上,实现选项的双向绑定。
阅读全文