提高页面加载速度,前端代码注意的关键点今天遇到了一个问题,就是我循环出
select
内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示。我写的原始代码如下:
<select v-model="token"><option v-for="(item,index) in list" :value="index" :key="index">{{item}}</option></select><script>export default {data() {return {token:'BNB'list: {1001:'NOW-E68',1002:'MITH-C76',1003:'SPNDB-916',1004:'BNB',},}}
vue中的select通过
v-model
可以获取到选中的值,如果option中存在value属性,优先获取value值即代码中的1004,如果不存在,则获取option
的文本内容,也就是上面代码中的BNB。造成默认不显示的原因是v-model获取的token在
option
的value
中匹配不到。因此可以选择去掉option
中的value
属性或者将v-model中的token值改为list的索引即1004
修改后的代码如下:
<select v-model="token"><option v-for="(item,index) in list" :value="index" :key="index">{{item}}</option></select><script>export default {data() {return {token:'1004'list: {1001:'NOW-E68',1002:'MITH-C76',1003:'SPNDB-916',1004:'BNB',},}}
我的个人博客,有空来坐坐
http://www.wangyanan.online