个人笔记002--vue点击按钮实现状态的切换

昨天项目改版，写了一个功能——点击按钮在启用/未启用两个状态之间切换。下面直接上代码

<template>
	<div class="hello">
		<div class="payShow" v-for="n,index in details" :key='index'>
			<!--按钮-->
			<div @click="changStatus(index)" :class="n.status==1?'selected':'default'">
				<div v-if="n.status==1" class="btns">
					<span class="on">ON</span>
					<span class="cir_right"></span>
				</div>
				<div class="btns" v-else>
					<span class="cir_left"></span>
					<span class="off">OFF</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Hello',
		data() {
			return {
				details: [{
						status: '1'
					},
					{
						status: '2'
					},
					{
						status: '2'
					},
					{
						status: '1'
					},
					{
						status: '1'
					},
					{
						status: '2'
					}
				]
			}
		},
		methods: {
			changStatus(a) {
				this.details[a].status = this.details[a].status == 2 ? 1 : 2
			}
		}
	}
</script>

<style scoped>
	/*按钮间距*/
	.btns {
		overflow: hidden;
	}
	
	/*左边圆*/
	.cir_left {
		float: left;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background-color: white;
		margin: 2px;
	}
	
	/*右边圆*/
	.cir_right {
		float: right;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background-color: white;
		margin: 2px;
	}
	
	.on {
		float: left;
		margin: 1px 4px;
		color: white;
	}
	
	.off {
		float: right;
		margin: 1px 4px;
		color: white;
	}
	
	/*选择*/
	.selected {
		display: inline-block;
		vertical-align: middle;
		width: 70px;
		height: 22px;
		line-height: 22px;
		margin: 10px;
		border-radius: 10px;
		background-color: #7A98F7;
		cursor: pointer;
	}
	
	/*未选中*/
	.default {
		display: inline-block;
		vertical-align: middle;
		width: 70px;
		height: 22px;
		line-height: 22px;
		margin: 10px;
		border-radius: 10px;
		background-color: #A7B6C2;
		cursor: pointer;
	}
</style>

上面这段代码也能实现那些点击收藏或者取消的功能，根据接口的返回数据把值赋给detail然后判断状态。当然，也欢迎小伙伴们指出不足之处