当前位置：首页 > news >正文

[Vue2]v-bind操作class

news 来源：原创 2025/6/16 7:00:37

v-bind可以控制元素的属性，而且可以直接指定class。语法和指定其他属性一样：

v-bing:class=""，同样的可以写成 :class=""

根据""中填写的属性，主要分为两种使用方式，一种是对象，一种是数值

class="对象"

以键值对为引。键是类名，用于指定启用的类，值则只能为true或false。

示例：

<div :class="{类名1:布尔值,类名2,布尔值}"></div>

适用于有某个样式class需要来回启用的场景，比如像csdn首页的导航分类栏：

这个导航栏肯定有很多样式class，而其中负责选中样式的往往需要反复启用，这里就可以使用class="对象"的形式。

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .child-box {
            flex: 1;                  /* 平均分配剩余空间 */
            height: 150px;            /* 子盒子高度 */
            border: 2px solid #000;   /* 黑色边框 */
            border-radius: 8px;       /* 圆角半径 */
            background-color: white;   /* 子盒子背景色 */
            box-sizing: border-box;    /* 包含边框在尺寸计算中 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .xuanzhong{
            background-color: dodgerblue;   /* 子盒子背景色 */
        }
    </style>
</head>

<body>

<div id="app" class="container">
    <ul>
        <li v-for="(item,index) in list" :key="item.name" @click="MyIndex=index">
            <a class="child-box" :class="{ xuanzhong:index===MyIndex}">{{ item.name }}</a>
        </li>
    </ul>
</div>

<script src="lib/vue.js"></script>

<script>

    const app = new Vue({
        el: '#app',
        data: {
            MyIndex:0,
            list:[
                {name:'2022'},
                {name:'2023'},
                {name:'2024'},
                {name:'2025'}
            ]
        }
    })

</script>

</body>