提高页面加载速度，前端代码注意的关键点今天遇到了一个问题，就是我循环出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