<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Title>document</Title> <script src="https://unpkg.com/vue/dist/vue.Js"></script> <style> HTML,body { Font: 13px/18px sans-serif; } select { min-wIDth: 300px; } </style></head><body> <div ID="el"></div> <!-- using string template here to work around HTML <option> placement restriction --> <script type="text/x-template" ID="demo-template"> <div> <p>Selected: {{ selected }}</p> <select2 :options="options" v-model="selected"> <option Disabled value="0">Select one</option> </select2> </div></script> <script type="text/x-template" ID="select2-template"> <select> <slot></slot> </select></script> <script> Vue.component(‘select2‘,{ props: [‘options‘,‘value‘],template: ‘#select2-template‘,mounted: function () { var vm = this $(this.$el) // init select2 .select2({ data: this.options }) .val(this.value) .trigger(‘change‘) // emit event on change. .on(‘change‘,function () { vm.$emit(‘input‘,this.value) }) },watch: { value: function (value) { // update value $(this.$el) .val(value) .trigger(‘change‘) },options: function (options) { // update options $(this.$el).empty().select2({ data: options }) } },destroyed: function () { $(this.$el).off().select2(‘destroy‘) } }) var vm = new Vue({ el: ‘#el‘,template: ‘#demo-template‘,data: { selected: 2,options: [ { ID: 1,text: ‘Hello‘ },{ ID: 2,text: ‘World‘ } ] } }) </script></body></HTML>总结
以上是内存溢出为你收集整理的select2全部内容，希望文章能够帮你解决select2所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）