web-dev-qa-db-ja.com

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.jsを使用して、div要素でアクティブリンクを実行できません

image 1

enter image description here

これが、リンクをアクティブにする必要がある要素のコードです。

    <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;
    }
  }
}
javascripthtmlcssvue.jsvuejs2
3
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;
    }
  }
});
19
verjas

アクティブなクラスを追加および削除する代わりに、以下のように簡単に使用できます。

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

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

これはVue 2の公式ドキュメントからです。たくさんあります 方法 。

0
Suat Atan PhD