:class="{active:index==isActive}"
v-for="(item, index) in contentlist"
@click="showdifference(index)"
:key="index">
{
{item.key}}
</template>
<script>
export default {
data() {
return {
isActive: '',
contentlist: [{key: 1}, {key: 2}, {key: 3}, {key: 4}]
methods: {
showdifference(index){
this.isActive = index
console.log(this.isActive)
</script>
<style>
.aaa {
margin: 10px;
width: 95%;
height: 100px;
border: 1px solid;
.active{
border: 2px solid red;
</style>
:class="{active:index==isActive}"
可以实现样式的动态绑定，即div是否有active属性，取决于index==isActive表达式的真假，若为true,则active属性被激活，会按照。active样式进行渲染，若为假，则active属性不会被激活，样式不会被渲染。
本样例只提供思路，复杂的业务需求请自行设计。
关注我的公众号获取海量vue视频教程
本编记录了
Vue
3中
动态
修改
CSS
样式
的方法，在项目中，经常会遇到
CSS
样式
要变更的地方。提示：以下是本篇文章正文内容，下面案例可供参考实际上，
动态
绑定style的优先级是大于对style
样式
进行修改的这边项目上有时候代码多了，可能忘了某个
样式
动态
绑定过就给它通过style修改了
样式
发现不生效，这时候排查问题就会发现它已经有
动态
绑定的值了所以才写了这篇来加深记忆和帮助一下遇到同样问题的朋友嘻嘻^-^
vue
-day011.
vue
的介绍作者介绍 框架的介绍2.
vue
官网https://cn.
vue
js.org/3.
vue
的优点 易用，灵活，高效4.库与框架区别 库：只具有某一种功能 框架：具备完整的功能 bootstrap element-ui5.开发环境与生产环境开发环境地址:<script src="https://cdn.jsdelivr.net/npm/
vue
/...
<
div
class="templateContainer">
<a-Card :class="{ active: index === currentIndex }" v-for="(item,index) in mallList" :key="index" @click="checkTemplate(index)">
<img class="templateImg" src="@/
VUE
实现
点击
DIV
背景换色
VUE
实现
DIV
点击
换色
这个方法初衷是为了代替button做一个更加自由添加图标标题之类的按钮来代替tab页签，所以后续还可以绑定一些自己的事件，如跳转页面，窗口弹出.
先写
DIV
和
CSS
样式
.
<template>
<
div
class="main-
div
" :style="getStyle(item)" v-for="(item,index) in list" @click="activeBtn(item)
：class
动态
绑定
样式
表中.changeStyle的
样式
，将当前索引传递给changeSelectStyle
@click
点击
事件触发函数changeStyle(),并将当前索引传递进去。
<ul v-for="(item,index) in prod...
