前端界面中经常会根据不同的用户,展示不同的权限,显示不同的数据,或者根据后台返回的数据,显示不同的页面,比如不同的下拉框,这时就需要根据实际情况,动态生成。
在原生的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:''