免费源码资源站青岛seo建站
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>class="数组"
数组中所有类，都会添加到盒子上。可以理解为一个class列表，里面所有的class中的样式都会按先后顺序添加到该元素中（如果有重复设置某一个属性，比如width，则后添加的class中设置的width会覆盖前面的class中设置的width）
适用于批量添加或删除类的时候使用。