Vue.js 클릭 후 이전 클래스를 삭제할 때 활성 클래스를 추가하려면

Vue.js 클릭 후 이전 클래스를 삭제할 때 활성 클래스를 추가하려면

여기 div 요소에서 이 활성 링크를 달성하려면 코드 사용 예를 볼 수 있습니다.

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

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

여기서 vue.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

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

Vue는 처음이지만 JQuery의 예를 Vue.js로 변환하는 간단한 방법은 다음과 같습니다.Jsfiddle 데모

기본적으로 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;
    }
  }
});

코드를 통해 직접 활성화하는 경우 VueJ를 사용하면 앵커태그의 액티브를 li 요소의 인덱스에 직접 바인드하여 인덱스에 바인드된 vuejs 변수가 변경되었을 때 액티브도 변경할 수 있습니다.자세한 내용은 다음 두 링크를 참조하십시오.

이것이 솔루션의 핵심입니다.

:class="{current:i == current}

아래 바이올린과 앵커액티브를 vuejs로 동적으로 제어하는 방법을 스토리 형식으로 설명하는 다른 게시물을 이용할 수 있습니다.

https://jsfiddle.net/Herteby/kpkcfcdw/

https://stackoverblow.wordpress.com/2021/04/03/how-modern-javascript-makes-click-simulation/

액티브 클래스를 추가 및 삭제하는 대신 다음과 같이 보다 쉽게 사용할 수 있습니다.

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

이 패러다임은 다양한 시나리오에 대해 동적으로 설정된 여러 클래스를 제공합니다.

이것은 Vue 2의 공식 매뉴얼에 기재되어 있습니다.여러 가지 방법이 있다.

언급URL : https://stackoverflow.com/questions/45521138/vue-js-to-add-class-active-when-click-and-remove-the-previous-one