Vue绑定样式案例（标题排他）

在 Vue 中，样式绑定是经常使用的，例如做选项卡、排他功能时都会用到，本节使用样式绑定来实现排他功能，代码如下。

CSS 代码如下。

<style>
    .redColor {
        color: red;
    }
</style>

视图层代码如下。

<div id="app" v-cloak>
    <span :class="{ redColor: isactive == 0 }">首页</span>
    <span :class="{ redColor: isactive == 1 }">关于我们</span>
    <span :class="{ redColor: isactive == 2 }">公司产品</span>
</div>

代码解析如下。

绑定 class 样式，当 isactive 等于 0 时 redColor 在 “首页” 生效，当 isactive 等于 1 时 redColor 在 “关于我们” 生效，当 isactive 等于 1 时 redColor 在 “公司产品” 生效。

isactive 是变量，需要在 M 层中找到 isactive，代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isactive: 0
        },
        methods: {}
    });
</script>

最后要做的是给 “首页”、“关于我们”、“公司产品” 绑定单击事件，使 data 中 isactive 的值发生相应的改变，代码如下。

视图层代码如下。

<div id="app" v-cloak>
    <span :class="{ redColor: isactive == 0 }" @click="f1(0)">首页</span>
    <span :class="{ redColor: isactive == 1 }" @click="f1(1)">关于我们</span>
    <span :class="{ redColor: isactive == 2 }" @click="f1(2)">公司产品</span>
</div>

业务逻辑代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isactive: 0
        },
        methods: {
            f1(i) {
                this.isactive = i;
            }
        }
    });
</script>

代码解析如下：

单击菜单调用 f1 函数，并进行传参。
在 f1 函数中修改 isactive 值为传递过来的参数，修改 isactive 时，要注意加 this。