Vue.js 单击并删除前一个时添加活动类
[英] Vue.js To add class active when click and remove the previous one
本文介绍了Vue.js 单击并删除前一个时添加活动类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在我的 div 元素上实现这个活动链接,你可以在这里看到我想用我的代码做的例子
这是我必须在其上激活链接的元素的代码
<div class="file has-text-Centered icon-active-color" v-on:click="activeiconc"><img src="../imgs/png.png"/><h4>.PNG</h4>
<div class="文件以文本为中心" v-on:click="activeicon" v-bind:class="{'icon-active-color':activeiconc,}"><img src="../imgs/pdf.png"/><h4>.PDF</h4>
<div class="文件以文本为中心" v-on:click="activeicon" v-bind:class="{'icon-active-color':activeiconc }"><img src="../imgs/jpg.png"/><h4>.JPG</h4>
<div class="文件以文本为中心" v-on:click="activeicon" v-bind:class="{'icon-active-color':activeiconc }"><img src="../imgs/psd.png"/><h4>.PSD</h4>
js
导出默认 {组件: {主布局},数据:函数(){返回 {标志:假,颜色:假,列表:真实,网格:假,删除btn:假,isImageModalActive: 假,活动行:假,活动图标:假,}},方法:{显示网格:功能(){this.grid = true;this.list = false;},节目单:功能(){this.list ^=true;this.grid = false},显示标志:功能(){this.logo ^= 真;this.color = false;this.deletebtn ^= 真;this.activerow ^= 真},显示颜色:功能(){this.color ^= 真;this.logo = false;},活动图标:功能(){this.activeiconc ^= 真;}}}
解决方案
我是 Vue 的新手,但将 JQuery 示例转换为 Vue.js 的一种简单方法是:Jsfiddle 演示
基本上,您需要将活动元素存储在您的 Vue 数据中,并根据 in 设置类.您可以使用 v-for
来呈现列表.
HTML
部分:
<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>
Vue.js
:
var app = new Vue({el:"#app",数据:{active_el:0},方法:{激活:功能(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屋!