今天在使用iview的下拉框的时候，需要获取下拉框上一次选中的内容，翻了下官方的文档的下拉选择内容改变的事件，发现它并没有提供这个参数。
如下：
返回值就是这一次选择的内容。并没有我需要的下拉框改变前的内容。
本来是想加一个变量存储上次选择的内容，但是总感觉每次都要修改，太麻烦了。
想了想，官方可能有用上次选择的内容，只是没有暴露给使用者。扒了扒官方的数据结构，果然发现了有个字段会保存上次选择的数据（不过需要注意的是，这个数据在触发on-change事件的时候，才是改变前的数据，如果on-change事件结束，依然会被iview修改为这次选中的数据），代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> </head> <body> <div id="app"> <i-select ref="test" v-model="model1" style="width:200px" @on-change="mytest"> <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option> </i-select> </div> <script> window.vm = new Vue({ el: ‘#app‘, data: { cityList: [ { value: ‘New York‘, label: ‘纽约‘ }, { value: ‘London‘, label: ‘伦敦‘ }, { value: ‘Sydney‘, label: ‘悉尼‘ }, { value: ‘Ottawa‘, label: ‘渥太华‘ }, { value: ‘Paris‘, label: ‘巴黎‘ }, { value: ‘Canberra‘, label: ‘堪培拉‘ } ], model1: ‘‘ }, methods: { mytest: function (val) { console.log("本次选择的内容"+val); //注意：需要给select标签设置ref，通过ref去获取数据 console.log("上一次选择的内容"+vm.$refs.test.value); //如果想要获取输入框的内容，可能需要去遍历list了，根据value取label $(this.cityList).each(function(index,obj){ if(obj.value === vm.$refs.test.value){ console.log("上一次选择的输入框内容"+obj.label); } }) } } }) </script> </body> </html>
原文：https://www.cnblogs.com/mayiaction/p/11981578.html