ivew框架的Select组件反显效果实现
可反显条件:
1、 数组和绑定值初始不为空,即selectName和nameList初始不为空
2、 并且绑定的初始值和数组某个对象里的属性(与:value绑定的属性)相等,则反显对应的值
(ps: 其中Select标签中的v-model的值与Option标签中的:value对应)
代码
<div class="selectBox">
<span>反显情况:</span>
<Select v-model="selectName">
<Option v-for="(item, index) in nameList"
:value="item.id">
{{item.name}}
</Option>
</Select>
</div>
下面为初始值:selectName初始值为’1’,与nameList[0].id相等,则反显’Major’
data() {
return {
selectName: '1',
nameList: [{
id:'1',
name: 'Major'
}, {
id:'2',
name: '粒沙'
}, {
id:'3',
name: '寿司'
}]
}
资料文件(ivew-select-fx.html)
$ git clone git@github.com:qmzgirl/vue-base-warehouse.git