Vue JS - 動態添加類到一個元素，然後刪除類到兄弟

我有一個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的方法呢？

來源

2017-02-26 rmondesilva

你可以改變像下面的代碼，以使其更加簡潔：

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>

相關鏈接：

來源

2017-02-26 06:19:52 Saurabh

Vue JS - 動態添加類到一個元素，然後刪除類到兄弟

回答

相關問題