今天用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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。