vue 操作select

今天，一个后端小伙伴问我vue中怎么获取select中选择的值，没有用到任何框架纯html+vue。顺便写了个demo给他

<div id="app">
<select name="public-choice" v-model="couponSelected" @change="getCouponSelected"> 
  <option :value="coupon.id" v-for="coupon in couponList" >{
    
    {
    
    coupon.name}}</option>
</select>
</div>

<script type="text/javascript">
var vm = new Vue({
    
    
  el: '#app',
  data:{
    
    
     couponList:[
      {
    
    
        id: 'A',
         name: '优惠券1'
      },
      {
    
    
        id: '1',
         name: '优惠券2'
      },
      {
    
    
        id: '2',
         name: '优惠券3'
       }
      ],
      couponSelected: '',
  },
  created(){
    
    
  　　//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
    this.couponSelected = this.couponList[0].id;
    },
    methods:{
    
    
        getCouponSelected(){
    
     //获取选中的优惠券
            console.log('获取选中的优惠券',this.couponSelected)
      }
  }
})

</script>