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:

   <div id="app">
    <select v-model="selected">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
    </select>
    </div>

 js:

<script>
  new Vue({
      el: '#app',
      data: {
          selected: ''
      },
  })
</script>

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

<template>
    <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
</template>

<script>
    export default {
        data () {
            return {
                cityList: [
                    {
                        value: '1',
                        label: '1'
                    },
                    {
                        value: '2',
                        label: '2'
                    },
                    {
                        value: '3',
                        label: '3'
                    },
                    {
                        value: '4',
                        label: '4'

                    },                             

                ],
                model1: ''
            }
        }
    }
</script>