Vue JS - 动态地将类添加到一个元素，然后将类删除到兄弟姐妹答案

【问题标题】：Vue JS - Dynamically add class to one element then remove class to siblingsVue JS - 动态地将类添加到一个元素，然后将类删除到兄弟姐妹
【发布时间】：2017-07-16 20:01:21
【问题描述】：

我是 Vue 的新手。

我有一个这样的JS：

var app = new Vue({
    el: '#app',
    data: {
        nav1: true,
        nav2: false,
        nav3: false
    },
    methods: {
        activatedThis: function(n){
            if( n === 'nav2' )
            {
               this.nav1 = false;
               this.nav3 = false;
               this.nav2 = true;
            }
            else if( n === 'nav3' )
            //And so on...
        }
    }
});

HTML

<div id="app">
   <h1 @click="activatedThis('nav1')" v-bind:class="{ active: nav1 }">Navigation 1</h1>
   <h1 @click="activatedThis('nav2')" v-bind:class="{ active: nav2 }">Navigation 2</h1>
   <h1 @click="activatedThis('nav3')" v-bind:class="{ active: nav3 }">Navigation 3</h1>
</div>

我想让我的方法动态化。我正在考虑循环this。但是由于我对 Vue 还不是很了解... 有没有纯 Vue 的方法来解决这个问题？

【问题讨论】：

标签： javascript jquery vue.js

【解决方案1】：

您可以像下面这样更改代码以使其更简洁：

var app = new Vue({
    el: '#app',
    data: {
        navs: {
           nav1: true,
           nav2: false,
           nav3: false
        }
    },
    methods: {
        activatedThis: function(nav){
               this.navs.nav1 = nav === "nav1";
               this.navs.nav3 = nav === "nav2";
               this.navs.nav2 = nav === "nav3";
        }
    }
});

HTML：

<div id="app">
   <h1 v-for="(nav, index) in Object.keys(navs)" @click="activatedThis(nav)" v-bind:class="{ 'active': navs[nav] }">Navigation {{index}}</h1>
</div>