Vue.jsは、アクティブなクラスを追加するときにクリックし、前の

Question

が、私はここにあなたが私は私のコードでやりたいの例を見ることができ、私のdiv要素で、このアクティブなリンクを実現したい削除するには

http://jsfiddle.net/fiddleyetu/9ff79/

$(function() { 
    $('ul.nav li').on('click', function() { 
     $(this).parent().find('li.active').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

ここvue.jsを使用して私は私のdiv要素にアクティブなリンクを行うことはできません

0123ここ は私がアクティブリンク

<div class="conversion"> 
    <div class="file has-text-centered icon-active-color" v-on:click="activeiconc"> 
     <img src="../imgs/png.png"/>  
     <h4>.PNG</h4> 
    </div> 
    <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc,}"> 
     <img src="../imgs/pdf.png"/> 
     <h4>.PDF</h4> 
    </div> 
    <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"> 
     <img src="../imgs/jpg.png"/> 
     <h4>.JPG</h4> 
    </div> 
    <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"> 
     <img src="../imgs/psd.png"/> 
     <h4>.PSD</h4> 
    </div> 
</div> 

JS

export default { 
components: { 
    MainLayout 
}, 
    data: function(){ 
    return { 
     logo: false, 
     color:false, 
     list:true, 
     grid:false, 
     deletebtn:false, 
     isImageModalActive: false, 
     activerow: false, 
     activeiconc:false, 
    } 
    }, 
    methods:{ 

    showgrid:function(){ 
     this.grid = true; 
     this.list = false; 

    }, 
    showlist:function(){ 
     this.list ^=true; 
     this.grid = false 
    }, 
    showLogo:function(){ 
     this.logo ^= true; 
     this.color = false; 
     this.deletebtn ^= true; 
     this.activerow ^= true 
    }, 
    showColor:function(){ 
     this.color ^= true; 
     this.logo = false; 
    }, 
    activeicon:function(){ 
     this.activeiconc ^= true; 
    } 
    } 
} 

Answer 1

私はVueのに新しいですが、あなたのjQueryの例を有効にする簡単な方法をしなければならないどの要素のための私のコードですVue.jsはこれです： Jsfiddle demo

基本的に、あなたはVueのデータにおけるアクティブな要素を格納し、中にベースクラスを設定する必要がありますあなたが使用することができます。 v-forを使用してリストをレンダリングします。

HTML一部：

<div id="app"> 
    <ul> 
    <li @click="activate(1)" :class="{ active : active_el == 1 }">Link 1</li> 
    <li @click="activate(2)" :class="{ active : active_el == 2 }">Link 2</li> 
    <li @click="activate(3)" :class="{ active : active_el == 3 }">Link 3</li> 
    </ul> 
</div> 

Vue.js：

var app = new Vue({ 
    el:"#app", 
    data:{ 
    active_el:0 
    }, 
    methods:{ 
    activate:function(el){ 
     this.active_el = el; 
    } 
    } 
}); 

Answer 2

あなたが代わりにアクティブなクラスの追加と削除の方法以下のように、より簡単に使用することができます。

<div class="static" 
    v-bind:class="{ active: isActive, 'text-danger': hasError }"> 
</div> 

このパラダイムをdiに対して動的に設定された複数の異なるクラスを提供するさまざまなシナリオ

これはVue 2の公式ドキュメントからのものです。 waysが多数あります。