vue3自定义按钮点击变颜色（切换）

最新推荐文章于 2024-08-29 16:29:16 发布

H@Z*rTE|i

最新推荐文章于 2024-08-29 16:29:16 发布

阅读量1.2k

点赞数 10

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/IT13333/article/details/135681530

版权

该篇文章介绍了如何在Vue组件中，通过监听`isChange`值和按钮索引，为按钮添加动态类名来实现默认选中第一个按钮，点击时颜色改变的效果。

摘要由CSDN通过智能技术生成

实现效果图：默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色在这里插入图片描述
利用动态类名，当定义isChange数值和下标index相同时，赋予act类名，实现变色效果

<template>
	<view class="page">
		<view class="btns" v-for="(item, index) in 6">
			<view class="btn" :class="{ act: isChange === index }" @click="change(index)">按钮{{ index + 1 }}</view>
		</view>
	</view>
</template>

<script>
import { ref } from 'vue';
export default {
	setup() {
		const isChange = ref(0);
		const change = ty => {
			isChange.value = ty;
		};
		return { isChange, change };
	}
};
</script>

<style>
.page {
	padding: 50px;
	display: flex;
	flex-wrap: wrap;
}
 
.btn {
	width: 60px;
	height: 30px;
	background-color: pink;
	margin: 10px;
}
.act {
	background-color: red;
}
</style>