昨天專案改版，寫了一個功能——點選按鈕在啟用/未啟用兩個狀態之間切換。下面直接上程式碼

<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然後判斷狀態。當然，也歡迎小夥伴們指出不足之處