我想在我的 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 元素上做活动链接
这是我必须在其上激活链接的元素的代码
<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;
}
}
}
原文由 Haroon Aslam 发布,翻译遵循 CC BY-SA 4.0 许可协议
我是 Vue 的新手,但是将 JQuery 示例转换为 Vue.js 的一种简单方法是: Jsfiddle demo
基本上,您需要将活动元素存储在 Vue 数据中,并根据 in 设置类。您可以使用
v-for
来呈现列表。HTML
部分:Vue.js
: