<div class="chooser"><ul class="chooser-list"><li :style="cssStyle"v-for="(item, index) in options" :key="index"@click="optionsClick(item)":class="{active: checkActive(item)}">{{ item }}</li></ul>
</div>

ul, li {margin: 0;padding:0;list-style: none;
}
.chooser {position: relative;display: inline-block;
}
.chooser-list li{margin: 5px;width: 80px;height: 40px;line-height: 40px;border-radius: 7px;display: inline-block;border: 1px solid #9C9C9C;color: #9C9C9C;text-align: center;background: #fff;
}
.chooser-list li.active {border-color: #097fe0;color: #097fe0;background: #fff;
}

export default {name: 'options',data () {return {currValArr: []}},props: {options: Array, //传入的数组isMultiply: { //是否是多选。默认为false：单选；true：多选type: Boolean,default: false},cssStyle: Object //可以自定义单选或者多选的样式},methods: {optionsClick (item) {    },    checkActive (item) {    }    }}

optionsClick (item) {if (this.isMultiply === false) { //单选this.$set(this.currValArr, 0, item) // 将该值设为当前数组的第一项} else { //多选if (this.currValArr.indexOf(item) === -1) {// 当前数组中没有该值则push到数组this.currValArr.push(item)} else { //当前数组中有该值，找到该值下标并删除this.currValArr.splice(this.currValArr.indexOf(item), 1)}}
}

checkActive (item) {if (this.isMultiply === false) {this.currValArr.length = 1}return this.currValArr.indexOf(item) !== -1
}

<template><div id="app"><h3>单选</h3><options :options="selections"></options><h3>多选</h3><options :options="selections1" :isMultiply=true></options></div>
</template>
<script>
import Options from './components/options'; //注意这里的路径
export default {name: 'App',components: {Options},data () {return {selections: ['赵雅芝','刘雪华','俞飞鸿','林青霞','陈美琪'],selections1: ['慕容冲','潘安','宋玉','卫玠','兰陵王']}},
}
</script>

<options :options="selections" v-model="value"></options><div>当前选中值：{{value}}</div>

<options :options="selections1" v-model="value1" :isMultiply=true></options><div>当前选中值：{{value1}}</div>

data () {return {// 代码省略value: ['赵雅芝'],value1: ['卫玠','潘安',]}
}

export default {name: 'options',model: {prop: 'currValArr',event: 'input'},props: {currValArr: Array,options: Array,isMultiply: {type: Boolean,default: false},cssStyle: Object},methods: {// ...}
}