El select, El option drop-down selection box

One . Use of drop-down selection box

<template>
  <el-select v-model="value" placeholder=" Please select ">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: ' Options 1',
          label: ' Golden cake '
        }, {
          value: ' Options 2',
          label: ' Double skin milk '
        }, {
          value: ' Options 3',
          label: ' Oyster omelet '
        }, {
          value: ' Options 4',
          label: ' dragon whiskers noodles '
        }, {
          value: ' Options 5',
          label: ' Beijing Roast Duck '
        }],
        value: ''
      }
    }
  }
</script>

Analysis of the code :

stay el-select Two way binding value value

 

stay el-option Cycle through

adopt V-for loop , loop options This array .

:key It is often used here when looping an array , Maximize rendering .

:label  Label of options , If it is not set, it will be the same as value identical

View :

  That is, pull it down to see .

:value    The value of the option

verification :

Two . Practical application

<template>
  <div class="">
    {
   {suibian}}
    <el-select v-model="suibian">
      <el-option v-for="(item,index) in arr" :key="index" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
    suibian:'',
      arr:[
        {
        label:'1',
        value:'1'
      },
          {
        label:'2',
        value:'2'
      },
          {
        label:'3',
        value:'3'
      },
          {
        label:'5',
        value:'5'
      },
      ]
    }
  },
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

3、 ... and . summary

1.key The binding is key Value in which diff Algorithm Maximize rendering

2. :label Associated with the selected item

3. :value Associated with the selected value

4.el-select adopt v-model The bound value is associated with the selected value , Can be an arbitrary value