vue中点击导航栏，动态改变样式，经典写法
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"><divclass="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>