Vue中动态生成＜option＞标签

前端界面中经常会根据不同的用户，展示不同的权限，显示不同的数据，或者根据后台返回的数据，显示不同的页面，比如不同的下拉框，这时就需要根据实际情况，动态生成。

在原生的js中可能会遍历整个数组，每遍历一次，创建一个<option>标签，最后追加到<select>标签中。。。

在vue中，会简单很多：

<div class="type-select">
     <select name="selected" id="rollOutAccount.bankCodeNumber" class="form-control m-b" 
         v-model="selected" @change="getRoleSelected">
         <option v-bind:value="list.bankCodeNumber" v-for="list in roleList" v-
               bind:key="list.bankCodeNumber">{
  {list.bankCodeNumber}}
         </option>
     </select>
</div>

注意：v-model绑定的数据和v-bind:key 绑定的是同一个数据，也就是selected就是list.bankCodeNumber.

绑定数据：

data(){
   return{
      roleList:[],
      selected:''