Question

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

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

Answer 1

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

基本上，您需要将活动元素存储在Vue数据中，并根据输入设置类。您可以使用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; } } });：

php app/console server:run --env=dev

Answer 2

您可以更轻松地使用以下方式，而不是添加和删除活动类：

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

这个范例为不同的场景提供了动态设置多个不同的类。

这是来自Vue 2官方文档。有很多ways。

Answer 3

如果你想通过代码直接激活，VueJS允许你将锚标签的active直接绑定到li元素的index上，这样当绑定到index的vuejs变量发生变化时，active也随之变化。查看这两个链接了解更多详情

这是解决方案的关键

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

可在下面的小提琴和另一篇文章中以故事格式解释如何在 vuejs 中动态控制锚点活动

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

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

Vue.js To add class active when click and remove the previous one

3 个答案: