比如基於jquery的select2插件，在vue下單獨用有很多問題，其實對於這類插件，可以用vue的自定義指令和組件來包裝，解決沖突的問題。引用官方vue1.0和2.0的兩個例子，學習一下。
大功告成。說說基於vue1的，對於下拉單選，用vue官方的例子即可，對於多選，看下面自己寫的，核心是用指令對象的el、vm等獲取被select2改變后的select下拉列表的相應對象，關鍵點是用jquery包裝原生元素后用.val()獲取多選值。
<body> <div id="el"> <p>Selected: {{selected}}</p> <select v-select3="selected" multiple class="app1" > <option value="0">default</option> <option v-for="o in options" :value="o.id">{{ o.text }}</option> </select> <p>Selected: {{market}}</p> <select v-select3="market" multiple class="app2" > <option value="0">default</option> <option v-for="o in markets" :value="o.id">{{ o.text }}</option> </select> </div> <script> Vue.directive('select3', { twoWay: true, priority: 1000, params: ['options'], bind: function () { var self = this; $(this.el) .select2() .on('change', function () { self.set($(self.el).val()); console.log($(self.el).val()); if ( self.expression == 'selected') { self.vm.market = []; } }) }, update: function (value) { $(this.el).val(value).trigger('change') }, unbind: function () { $(this.el).off().select2('destroy') } }) var vm = new Vue({ el: '#el', data: { selected: 0, market: '', options: [ { id: 1, text: 'hello' }, { id: 2, text: 'what' } ], markets: [ { id: 1, text: '文山二手車' }, { id: 2, text: '小哥二手車' } ] } }); setTimeout(function () { vm.market = 0; }, 0); </script> </body>
另外，在插入默認值的時候，注意做一個異步插入，因為vue更新頁面是異步的，這里做了一個setTimeout( , 0)。
另外在單頁里，考慮在SSpa的show的時候，設置一狀態位vm.isInit，表示若是初始化默認選項，判斷onchange里是否觸發相關改變的時候不重新設置一些值的清空以及獲取 。