vue中点击导航栏，动态改变样式，经典写法
在vue中，我们通常会有这样的情况，在多个子模块之间，点击其中一个子模块，修改当前点击的子模块的样式。如图，点击B模块时，模块B样式改变，其它样式还原啦：
具体怎么实现呢，主要是使用动态属性绑定来实现的，其中也涉及 静态属性和动态属性结合使用。未选中模块的样式我们看做是静态属性，动态属性是在点击后加进来的（覆盖）的样式属性
动态属性绑定
我们先了解下动态属性绑定：动态属性绑定就是用变量动态的添加属性，如下：
<div id="app">
<div :class="{ 'active': isActive }"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
这里的 .active样式是否生效，取决于 isActive这个变量值是否为true
静态样式和动态样式结合使用
我们要实现想要的效果，还需要结合静态样式，因为静态样式用来渲染其它未激活状态的子模块，动态样式用来渲染激活状态的子模块
写法如下，需要把绑定的class属性改成中括号形式，因为中括号形式表示样式数组，存放多个样式：
:class="['itemclass' , indexItem== index ? 'active' :'']"
第一个样式为 itemclass，第二个样式要看 indexItem== index 这个表达式是否成立，如果成立，则加入 active样式，表示激活状态，
如果不成立，则不加任何样式，表示非激活状态。
这样描述应该很容易理解哈。
完整代码
于是我们可以写出完整的代码, 其中，我用indexItem 表示（标识）当前是哪一项是选中激活状态，index是当前选项的数组下标。
indexItem == index 就是当前这个模块，是否等于激活状态下的模块，如果是，添加active属性，修改背景色。
其中，点击事件changeItem用来设置当前点击的模块为激活状态的模块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue动态样式绑定</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" class="line">
<div
class="static"
@click="changeItem(index)"
v-bind:class="['itemclass', index==indexItem ? 'active':'']"
v-for="(item, index) in items"
>
{{item.name}}
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
indexItem: 0,
items: [{ name: "A" }, { name: "B" }, { name: "C" }],
},
methods: {
changeItem(index) {
this.indexItem = index;
},
},
});
</script>
<style>
.itemclass {
margin: 40px;
width: 100px;
height: 100px;
text-align: center;
font-size: 40px;
background: rgb(191, 212, 222);
}
.active {
background: rgb(37, 209, 198);
}
.line {
width: 600px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
</style>
</body>
</html>
