Javascript Vue.js 单击并删除前一个时添加活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45521138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js To add class active when click and remove the previous one
提问by Haroon Aslam
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
我想在我的 div 元素上实现这个活动链接，你可以看到我想用我的代码做的例子
http://jsfiddle.net/fiddleyetu/9ff79/
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
在这里使用 vue.js 我不能在我的 div 元素上做活动链接
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
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;
}
}
}
回答by verjas
I'm new to Vue but an easy way to turn your JQuery example into Vue.js is this: Jsfiddle demo
我是 Vue 的新手，但将 JQuery 示例转换为 Vue.js 的一种简单方法是： 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-forto render the list.
基本上，您需要将活动元素存储在您的 Vue 数据中，并基于 in 设置类。您可以使用 av-for来呈现列表。
The HTMLpart:
该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>
The Vue.js:
的Vue.js：
var app = new Vue({
el:"#app",
data:{
active_el:0
},
methods:{
activate:function(el){
this.active_el = el;
}
}
});
回答by Suat Atan PhD
You can use more easily way like below instead of adding and removing active class:
您可以更轻松地使用如下所示的方法，而不是添加和删除活动类：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
This paradigm provides dynamically set multiple different class for different scenarios.
这种范式为不同的场景提供了动态设置多个不同的类。
This is from Vue 2 official documentation. There are many ways.
这是来自 Vue 2 官方文档。有很多方法。
