Vue.js在单击并删除上一个时添加活动类 [英] Vue.js To add class active when click and remove the previous one

问题描述

我想在我的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> 
  

js

 导出默认值{
组件：{
 MainLayout 
}，
 data：function（）{
 return {
 logo：false，
颜色：false，
 list：true，
 grid：false，
 deletebtn：false，
 isImageModalActive：false，
 activerow：false，
 activeiconc：false，
} 
}，
方法：{
 
 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; 
} 
} 
} 
  

解决方案

我是Vue的新手，但是将您的JQuery示例转换为Vue.js的简单方法是：
Jsfiddle演示

基本上，您需要将活动元素存储在Vue数据中，并基于in设置类。您可以使用 v-for 呈现列表。

HTML 部分：

 < div id = app> 
< ul> 
< li @ click = activate（1）：class = {active：active_el == 1}>链接1< / li> 
< li @ click = activate（2）：class = {active：active_el == 2}>链接2< / li> 
< li @ click = activate（3）：class = {active：active_el == 3}>链接3< / li> 
< / ul> 
< / div> 
  

Vue.js ：

  var app = new Vue（{
 el：＃app，
数据：{
 active_el：0 
}，
方法：{
 activate：function（el）{
 this.active_el = el; 
} 
} 
}）; 
  

I want to achieve this active link on my div element here you can see the example that i want to do with my code

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

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

in here using vue.js i can't do the active link on my div elements

here is my code for the elements on which i have to do the links active

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

解决方案

I'm new to Vue but an easy way to turn your JQuery example into Vue.js is this: Jsfiddle demo

Basically, you need to store the active element in your Vue data, and set the class based on in. You could use a v-for to render the list.

The HTML part:

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

The Vue.js:

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

这篇关于Vue.js在单击并删除上一个时添加活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！