Vue Bootstrap Select 是一個基于 Vue.js 和 Bootstrap 的選擇器組件。該組件可用于創建下拉列表,并支持搜索、多選等功能。下面介紹該組件的安裝和使用方法。
首先需要安裝 Vue.js 和 Bootstrap 的相關依賴,可以通過 npm 來進行安裝。
npm install vue bootstrap
接下來,安裝 Vue Bootstrap Select。同樣是使用 npm 命令。
npm install vue-bootstrap-select
在項目中引入 Vue Bootstrap Select。
import VueBootstrapSelect from 'vue-bootstrap-select'
Vue.component('vue-bootstrap-select', VueBootstrapSelect)
使用 Vue Bootstrap Select 的基本語法如下:
<vue-bootstrap-select v-model="selected" :options="options"></vue-bootstrap-select>
其中,v-model 綁定組件的選項值,options 則是可選項的數組。
下面是一個完整的例子:
<template>
<div class="container">
<vue-bootstrap-select v-model="selected" :options="options"></vue-bootstrap-select>
</div>
</template>
<script>
import VueBootstrapSelect from 'vue-bootstrap-select'
export default {
components: {
VueBootstrapSelect
},
data () {
return {
selected: '',
options: [
{ text: 'Option 1', value: 'option1' },
{ text: 'Option 2', value: 'option2' },
{ text: 'Option 3', value: 'option3' }
]
}
}
}
</script>
該組件還支持搜索、多選等高級功能,具體可以參考官方文檔。
上一篇vue小米商城 視頻
下一篇python 輸入列表