学习uniapp v-bind:class 实现点击选中变色、改变样式

c1728733689

于 2024-09-19 13:54:51 发布

阅读量176

点赞数 3

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/c1728733689/article/details/142356834

版权

Vue动态绑定class

代码如下：

<template>
    <view>
        <view class="box" @click="toggleSelect(1)" :class="{ 'selected': box1Selected }">盒子1</view>
        <view class="box" @click="toggleSelect(2)" :class="{ 'selected': box2Selected }">盒子2</view>
        <view class="box" @click="toggleSelect(3)" :class="{ 'selected': box3Selected }">盒子3</view>
        <view class="box" @click="toggleSelect(4)" :class="{ 'selected': box4Selected }">盒子4</view>
        <view class="box" @click="toggleSelect(5)" :class="{ 'selected': box5Selected }">盒子5</view>
        <view class="box" @click="toggleSelect(6)" :class="{ 'selected': box6Selected }">盒子6</view>
		
        <view class="box" :class="{ 'selected': selectedCount > 0 }">
		        <!-- 使用 :class 来动态绑定 selected 类，根据每个盒子的选中状态应用样式 -->
            {{ selectedCount > 0 ? '有 ' + selectedCount + ' 个盒子被选中了' : '没有盒子被选中' }}
			<!-- 如果有盒子被选中显示几个盒子被选中 如果没有显示没有盒子被选中 -->
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            box1Selected: false,
            box2Selected: false,
            box3Selected: false,
            box4Selected: false,
            box5Selected: false,
            box6Selected: false
        };
    },
    computed: {
        selectedCount() {
            return (this.box1Selected ? 1 : 0) + (this.box2Selected ? 1 : 0) + (this.box3Selected ? 1 : 0) +
                   (this.box4Selected ? 1 : 0) + (this.box5Selected ? 1 : 0) + (this.box6Selected ? 1 : 0);
        }
    },
    methods: {
        toggleSelect(boxNumber) {
            this[`box${boxNumber}Selected`] = !this[`box${boxNumber}Selected`];
        }
    }
}
</script>

<style>
    .box {
        background-color: white;
        font-size: 25rpx;
        width: 400rpx;
        margin-bottom: 10rpx;
        text-align: center;
        padding: 20rpx;
		margin: 0 auto;
		border: 1px solid red;
    }
    .selected {
        background-color: pink;
        color: white;
    }
</style>

效果显示：点击盒子改变样式并记录改变的盒子数量