html下拉框查询遍历查询内容,Vue中的select组件，使用v-for遍历实现option内容

Vue中的select下拉框

1:原始的select标签试中option选项内容直接写在HTML中。

2:select组件使用v-for遍历来实现select下拉框中的option值。

在Vue中 使用select下拉框 主要靠的是 v-model 来绑定选项 option 的 value 值。

option标签中的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。

注释：如果没有指定 value 属性，选项的值将设置为option标签中的内容。

下拉框效果：

option内容写在HTML中：

html:

1

2

3

4

js:

new Vue({

el: '#app',

data: {

selected: ''

},

})

option内容写在js中，通过v-for遍历：(iview组件库中的select组件)

{{ item.label }}

export default {

data () {

return {

cityList: [

{

value: '1',

label: '1'

},

{

value: '2',

label: '2'

},

{

value: '3',

label: '3'

},

{

value: '4',

label: '4'

},

],

model1: ''

}

}

}

本文地址：https://blog.csdn.net/JCzlh/article/details/111059954