uniapp里点击按钮改样式及记录值

虽然做的挺多了，不过和之前的不太一样。在做vue前一般jq做。

业务要求:

点选按钮次数可以选择不同的颜色，代表症状出现的频率及严重程度
        白色：没有；
        绿色：总是；
        蓝色：一般；
        黄色：经常；
        红色：总是；
记录的分值分别是0,1,2,3,4 默认值0(没有)

动工

data: 接口还没做

symptom: ['症状1', '症状2', '症状3', '症状4', '症状5', '症状6', '症状7', '症状8', '症状9', '症状10', '症状11'],
select: [],

页面:

    <view class="symptom">
        <button :class="'symptom_button ' + 'sym'+select[index]" @click="symptom_btn(index)" v-for="(item,index) in symptom">{{item}}</button>
    </view>

onload及methods:

    onLoad() {
        this.select = new Array(this.symptom.length).fill(0)
    },
    methods: {
        symptom_btn(index) {
            if (this.select[index] < 4) {
                this.select.splice(index, 1, this.select[index] + 1)
            } else if (this.select[index] == 4) {
                this.select.splice(index, 1, 0)
            }
            console.log('第' + (index + 1) + '选项 ' + this.symptom[index] + ' 选择变更为' + this.select[index] + '分')
        },
    }

onload用于记录值的初始化，默认值0填充0，在调用接口获取symptom的值后使用，数组涉及视图更新因此用splice，不可直接赋值。

样式:

.symptom {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.symptom_button {
	width: 270rpx;
	margin: 20rpx;
	transition:color 2s;
}

.sym4 {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}

.sym3 {
	color: #fff;
	background-color: #f0ad4e;
	border-color: #eea236;
}

.sym2 {
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
}

.sym1 {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
}

.sym0 {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}

好水，好闲