vue-select

转载 (原文地址) wwh 随笔 个人博客 138阅读 2019-01-11 13:46:09 举报

vue-select是什么
什么是vue-select,A native Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.

vue-select官网:官网
vue-select文档:文档
vue-select源码仓库:源码仓库
vue-select下载地址:点此下载 点此下载2
vue-select介绍、vue-select使用
A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.

Features
AJAX Support
Tagging
List Filtering/Searching
Supports Vuex
Select Single/Multiple Options
Tested with Bootstrap 3/4, Bulma, Foundation
+95% Test Coverage
~33kb minified with CSS
Zero dependencies
Documentation
Install
Vue Compatibility
vue ~2.0 use vue-select ~2.0
vue ~1.0 use vue-select ~1.0
NPM
Install the package. You should install vue-select@1.3.3 for use with vue ~1.0.

Register the component

import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
You may now use the component in your markup

<v-select v-model="selected" :options="['foo','bar']"></v-select>
CDN
Just include vue & vue-select.js - I recommend using unpkg.

<script src="https://unpkg.com/vue@latest"></script>;
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@latest"></script>;
<!-- or point to a specific release -->
<script src="https://unpkg.com/vue-select@1.3.3"></script>;
Then register the component in your javascript:

Vue.component('v-select', VueSelect.VueSelect);
You may now use the component in your markup

<v-select v-model="selected" :options="['foo','bar']"></v-select>
Here’s an example on JSBin.

Basic Usage
Syncing a Selected Value
The most common use case for vue-select is to have the chosen value synced with a parent component. vue-select takes advantage of the v-model syntax to sync values with a parent.

<v-select v-model="selected"></v-select>
new Vue({
data: {
selected: null
}
})
Setting Options
vue-select accepts arrays of strings and objects to use as options through the options prop.

<v-select :options="['foo','bar']"></v-select>
When provided an array of objects, vue-select will display a single value of the object. By default, vue-select will look for a key named ‘label’ on the object to use as display text.

<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
License
MIT

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复