SOURCE

const colors=['黑', '棕', '红', '橙', '黄', '绿', '蓝', '紫', '灰', '白']
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const power = ['1', '10', '100', '1K', '10K', '100K', '1M', '10M']
const percent = ['金', '银']
const percentNumbers = ['5%', '10%']

var vm = new Vue({
    el: '#app',
    data:() => {
        return {
            colors: colors,
            percent: percent,
            numbers: numbers,
            percentNumbers: percentNumbers,
            resistance: '',
            resistanceInput: '',
            selected: []
        }
    },
    created() {
        
    },
    methods: {
        onSelect(item) {
            // console.log(item)
            if (this.selected.length > 4) {
                this.errMsg = '色环最多4环'
                return
            }
            this.selected.push(item)
        },
        onClear() {
            this.selected = []
        }
    }
})

<div id="app">
    <h1>色环电阻阻值</h1>
    <ul class="color-row">
	    <li class="color-item" v-for="c in colors"
        @click="onSelect(c)">{{c}}</li>
    </ul>
    <div style="margin: 20px 0;">
        <span class="title">已选色环</span>
        <span v-for="s in selected"> {{s}} </span>
        <a v-show="selected.length > 0" class="btn" href="javascript:;" @click="onClear">清空</a></div>
    <div><span class="title">阻值</span><span>{{resistance}}</span></div>
    <hr />
    <div><span class="title">输入阻值</span><input class="input" type="text" v-model="resistanceInput"></div>
    <div><span class="title">色环</span></div>
</div>

.color-row{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
}
.color-item{
    list-style: none;
    margin: 0;
    padding:2px 14px;
}
.color-row .color-item:nth-of-type(1){
    background: #000;
}
.color-row .color-item:nth-of-type(2){
    background: #953300;
}
.color-row .color-item:nth-of-type(3){
    background: #ff0100;
}
.color-row .color-item:nth-of-type(4){
    background: #ff6202;
}
.color-row .color-item:nth-of-type(5){
    background: #ffff01;
    color: #000;
}
.color-row .color-item:nth-of-type(6){
    background: #037e03;
}
.color-row .color-item:nth-of-type(7){
    background: #0000ff;
}
.color-row .color-item:nth-of-type(8){
    background: #7f007f;
}
.color-row .color-item:nth-of-type(9){
    background: #808080;
}
.color-row .color-item:nth-of-type(10){
    background: #fff;
    color: #000;
}
.title{
    color: #999;
}
.btn{
    padding: 2px 20px;
    color: #000;
    text-decoration: none;
    background: #fff;
    border: 1px solid #000;
}
.input{
    padding: 2px 6px;
    outline: none;
    font-size: 18px;
    border: 1px solid #000;
}