今天用Vue做一個小項目時需要用到多個select篩選功能，但是原生的太丑，如果直接寫在當前頁多個select處理起來又太繁瑣，第三方ui又太大，所以就自己寫了一個，并上傳了GitHub倉庫,倉庫地址：https://github.com/tuohuang/vue-select
使用方法：
引入組件:
import VueSelect from '../components/VueSelect'
注冊組件
export default { components: { VueSelect }}使用組件
<template> <vue-select :options="options" name="name" value="id" placeholder="請選擇類型" v-model="selected_id" @change="handleChange"> </vue-select></template>
DEMO:
<template> <div> <vue-select :options="options" name="name" value="id" placeholder="請選擇一個水果" v-model="selected_id" @change="handleChange"> </vue-select> </div></template><script>import VueSelect from '../components/VueSelect'export default { name: "Index", data() { return { selected_id: "", options: [ {name: "蘋果", id: 1}, {name: "橘子", id: 2}, {name: "香蕉", id: 3}, {name: "西瓜", id: 4}, ] } }, components: { VueSelect }, methods: { handleChange(e) { console.log(e) } }}</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
