隨著前端技術的不斷發(fā)展，前端框架越來越多，其中VueJS框架備受關注。VueJS在開發(fā)過程中可以輕松創(chuàng)建自定義組件，其中之一即為Selected組件，讓用戶可以從一個預定義的選項列表中選擇一個或多個項目。
實現(xiàn)Selected組件需要使用Vue的組件化思想。首先，需要定義一個組件，并將它的模板(template)、數(shù)據(jù)(data)和功能(methods)封裝起來。定義template時，需要考慮如何在DOM中渲染用戶所選值的列表。具體來說，需要定義一個按鈕或文本框的UI元素，在點擊或輸入時會彈出/顯示一個下拉框展示預定義的選項列表。當用戶選擇一個或多個項目時，組件的內部數(shù)據(jù)和外部綁定將發(fā)生更改，視圖渲染相應的變化。
Vue.component('Selected', {
template: `{{ isOpen ? '▲': '▼' }}`,
data() {
return {
isOpen: false,
selected: []
}
},
props: {
options: {
type: Array,
required: true
}
},
methods: {
selectAll() {
this.selected = this.options.map(option =>option.value)
}
}
})在上面的代碼中，我們定義了一個Selected組件，并使用template屬性來定義組件的模板。Selected組件包含一個按鈕和下拉框用于展示預定義的選項列表。isOpen表示下拉框是否展開，selected標記當前所選的項目，options屬性表示預定義的選項列表。
v-if指令用于條件渲染，根據(jù)isOpen的值來展示或隱藏下拉框。v-for指令在選項列表中遍歷每個選項，v-model指令將用戶選擇的項目綁定到selected變量上。
綁定數(shù)據(jù)意味著在數(shù)據(jù)發(fā)生更改時，組件的DOM將自動更新。在上例中，當用戶選擇項目時，selected變量將被更新并影響動態(tài)的選項列表，從而實現(xiàn)展示已選項、多選功能等。
這只是Selected組件的基礎部分，可以根據(jù)自己的項目需要進行進一步的個性化定制。