vue中:class语法的{}[]两种用法及其使用场景例子
语法 :class="对象/数组"
① 传对象 →键就是类名，值是布尔值。如果值为 true，则当前元素含有这个类实现这个类的样式，否则没有这个类，不去实现
<div class="box":class="{ 类名1:布尔值，类名2:布尔值}"></div>适用场景:某一个或多个类名，来回切换，从而灵活的实现元素样式切换
东东秒杀 每日特价 品类秒杀
② 传数组 →数组中所有的类，都会添加到盒子上，这样这些类所设置的样式就会被渲染出来，本质就是一个 class 列表
<div class="box" :class="[ 类名1，类名2，类名3]"></div>下面是东东秒杀的案例：
这是data数据:
data: {
list: [
{ id: 1, name: '京东秒杀' },
{ id: 2, name: '每日特价' },
{ id: 3, name: '品类秒杀' }
]
}这里有三个tab，给第一个tab设置class为“active ” ，并在上面的<style>标签里面给class为“active ”的类设置了红底白字的样式属性进行渲染
li a.active {
background-color: #e01222;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li><a class="active" href="#">东东秒杀</a></li>
<li><a href="#">每日特价</a></li>
<li><a href="#">品类秒杀</a></li>
</ul>
</div>需求效果是点击哪个tab就高亮哪个tab，从而实现整个active 类名，来回切换渲染，从而灵活的实现元素样式切换
首先从data获取列表使用v-for渲染，a标签里面的值用{{}}展示为list的每一个name，并加上class属性为active :
<li v-for="(item,undex) in list" :key="item.id">
<a class="active" href="#">{{item.name}}</a>
</li>效果是文字和效果展示如下：
现在需要点击哪个<li>标签就高亮渲染哪个
所以使用:class="对象/数组"里面的对象语法：
<li v-for="(item,undex) in list" :key="item.id">
<a :class="{active :true}" href="#">{{item.name}}</a>
</li>首先这里 :class="{active :true}"表示所有tab全部带这个class标签：true
而需求是点哪个就高亮哪个，所以可以用一个值来记住点的是哪个，这里其实记item.id可以，下标index也是可以的，这里就用下标展示吧。先去data里面声明一个rememberIndex并设置默认值为下标0
data: {
rememberIndex:0,
list: [
{ id: 1, name: '京东秒杀' },
{ id: 2, name: '每日特价' },
{ id: 3, name: '品类秒杀' }
]
}去a标签里面的:class里面把判断条件写完整，即点击的下标是不是记录的这个
<a :class="{active:index===rememberIndex}">{{item.name}}</a>效果出来了
并且把下标默认值给为1和2时也能同样生效：
再想想怎么把点击哪个tab时把下标传过去让rememberIndex知道，直接给每个<li>标签注册点击事件把rememberIndex的值赋值为当前<li>的下标即可
<li v-for="(item,index) in list" :key=item.id @click=""rememberIndex>至此大功告成，效果是点击哪个tab就高亮渲染哪个
原文地址：https://blog.csdn.net/SSHLY3/article/details/143650567
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！