select动态绑定vue.js

动态选项，用 v-for 渲染：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

 

new Vue({
  el: '#demo',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

转自 https://blog.csdn.net/gaoxiaoba/article/details/52763570?locationNum=14&fps=1

 

拿到当前选中的 option的text值

<select v-model="defaultCardId" id="select">
    <option v-for="item in bankCardTypeList" :value="item.bankId">{{item.bankName}}    
    </option>
</select>

let select = document.getElementById('select');
let index = select.selectedIndex;
console.log(select.options[index].text); //当前选中的文本值