Vue.js添加類活躍的時候點擊刪除以前的一個

我要實現我的div元素在此活動鏈接在這裏你可以看到，我想我的代碼做例子Vue.js添加類活躍的時候點擊刪除以前的一個

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

在這裏使用vue.js我不能做我的div元素的活動鏈接

這裏是我上，我所要做的

<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>

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; 
    } 
    } 
}

來源

2017-08-05 Haroon Aslam

我是新來的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; 
    } 
    } 
});

來源

2017-08-05 12:39:49 verjas

您可以使用方法類似下面，而不是添加和刪除活動類更容易：

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

這一範式爲di提供動態設置多個不同的類不同的場景。

這是來自Vue 2官方文檔。有很多ways。

來源

2017-11-07 18:14:31

Vue.js添加類活躍的時候點擊刪除以前的一個

回答

相關問題