uni-app 实现一个多选按钮功能

傷城~ 2022-10-13 13:59 530阅读 0赞

<template>
    	<view>
    		<view class="content">
    			<view class="title">配套设施</view>
    			<view class="info">
    				<view class="item" @click="supportingfacilities(item)" v-for="(item,index) in supportingfacilitieslist">
    					<div class="div">
    						<text :class="item.flage?'text':''"></text>
    					</div>{ { item.name}}
    				</view>
    			</view>
    
    		</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		name: "supportingfacilities",
    		data() { 
    			return { 
    				supportingfacilitieslist: [{ 
    						name: "冰箱",
    						flage: true
    					},
    					{ 
    						name: "空调",
    						flage: false
    					},
    					{ 
    						name: "洗衣机",
    						flage: true
    					},
    					{ 
    						name: "热水器",
    						flage: false
    					},
    					{ 
    						name: "沙发",
    						flage: false
    					},
    					{ 
    						name: "油烟机",
    						flage: false
    					},
    					{ 
    						name: "燃气灶",
    						flage: false
    					},
    					{ 
    						name: "卫生间",
    						flage: false
    					},
    					{ 
    						name: "床",
    						flage: true
    					},
    					{ 
    						name: "智能门锁",
    						flage: false
    					}
    				]
    			};
    		},
    		methods:{ 
    			supportingfacilities(data){ 
    				 
    				this.supportingfacilitieslist.map(item=>{ 
    					 
    					if(item.name==data.name)
    					  item.flage=!data.flage;
    				})
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.content { 
    		.title { 
    			color: #999999;
    			font-size: 16px;
    			height: 50px;
    			line-height: 50px;
    
    		}
    
    		.info { 
    			display: flex;
    			flex-wrap: wrap;
    
    			.item { 
    				display: flex;
    				align-items: center;
    				width: 80px;
    				justify-content: flex-start;
    				margin-left: 25px;
    				margin-top: 10px;
                    color:#3F3F3F;
    				font-size: 14px;
    				
    				.div { 
    					width: 15px;
    					height: 15px;
    					border: 1px solid #707070;
    					box-sizing: border-box;
    					display: flex;
    
    					.text { 
    						width: 8px;
    						height: 8px;
    						display: inline-block;
    						background-color: #3F3F3F;
    						margin: 2px;
    
    					}
    				}
    
    			}
    		}
    	}
    </style>

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221005/fe5e649ceab24dc29bfcef9ffe848240.png