使用Vue框架Select元素在ie11加载页面时显示异常

<div id="app"> <select id="sl" v-model="selected"> <option disabled value="">请选择</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <span>Selected: {{selected }}</span> </div> <script> var vm = new Vue({ el: '#app', data: { checked:true, selected:1 } }) $(function(){ vm.selected=2; }); </script>

在ie11下通过F5或者地址栏刷新页面时显示：

ie9下显示：

解决方法：

1.移除select元素的v-model绑定。

2.在vue提供的updated钩子函数中，把select元素的选中索引设置为 vue.data selected的值

3.为select绑定change事件，以便在修改select元素的值时能够同时更新vue.data selected的值

 修改后的代码：

<div id="app"> <select id="sl"> <option disabled value="">请选择</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <span>Selected: {{selected }}</span> </div> <script> var vm = new Vue({ el: '#app', data: { checked:true, selected:1 }, updated: function () { //钩子函数,数据更新时触发 //设置select元素的索引 $("#sl").get(0).selectedIndex = this.selected; } }) $(function(){ vm.selected=2; $("#sl").change(function(){ //实现选中select时,修改vue.data selected的值 vm.selected = $("#sl").get(0).selectedIndex; }); }); </script>

修改后，在ie11下通过F5或者地址栏刷新页面时显示：

ie9下显示同样没有问题：