VSCode前端工具
打开VScode,新建一个html页面,输入
解释:v-model是我们要获取的选中值,如果option中存在value属性,优先获取value值即sort.val,如果不存在,则获取option的文本内容,也就是代码中sort.name.
新建js页面,输入 var date = new Vue({ el: '#mainDate', data: { sortList: [ { val: '', name: '全部' }, { val: 'D', name: '牛仔' }, { val: 'K', name: '针织' }, { val: 'W', name: '梭织' } ], sortonSelected: '' }, created: function () { //默认选中全部 this.sortonSelected = this.sortList[0].val; }});
解释:sortList就是我们要显示的数据,如果想要默认 created中要写上 this.sortonSelected = this.sortList[0].val(这边默认第一个值 全部),
select整体点开效果