Vue-multiselect詳解（Vue.js選擇框解決方案）
阿新 • • 發佈：2018-07-15
type 選擇框 this width port app mount 分享圖片 his
github地址：https://github.com/shentao/vue-multiselect
以下代碼，可以直接建一個html文件，運行看到效果：
運行效果：
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script src="https://unpkg.com/[email protected]"></script> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> * { font-family: ‘Lato‘, ‘Avenir‘, sans-serif; } </style> </head> <body> <div id="app"> <multiselect v-model="value" :options="options" :multiple="true" :taggable="true" :searchable="true" @tag="addLibrary" > </multiselect> </div> <script>new Vue({ components: { Multiselect: window.VueMultiselect.default }, data: { value: [‘Vue-Multiselect‘], options: [‘Vue.js‘, ‘Vue-Multiselect‘, ‘Vuelidate‘,‘Vuelidate1‘,‘Vuelidate2‘] }, methods: { addLibrary(lib) { this.options.push(lib) this.value.push(lib) } } }).$mount(‘#app‘) </script> </body> </html>
Vue-multiselect詳解（Vue.js選擇框解決方案）