html选中一个两个出现active,vuejs选中当前样式active的实例

这篇文章主要为大家详细介绍了vuejs选中当前样式active的实例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

如下所示：

代码如下：

名称1名称2名称3名称4

{{item.text}}{{item.text}}{{item.text}}{{item.text}}

vue js代码

代码如下：

export default {

data:function() {

return{

items: [

{ text: '巴士' },

{ text: '快车' },

{ text: '专车' },

{ text: '顺风车' },

{ text: '出租车' },

{ text: '代驾' }

],

}

},

methods:{

activeHover:function(index){

var arrLi=[];

var aLi=$("table tbody tr")

for(var i=0;i

arrLi.push(aLi[i])

}

for( var i=0; i

if(arrLi[i] !=this){

$(arrLi[i]).removeClass("active")

}

if(!$(arrLi[i]).hasClass("active")){

$(arrLi[index]).addClass("active")

}else{

$(arrLi[i]).removeClass("active")

}

}

},

}

}

CSS代码

代码如下：

.abc{

background-color: #2aabd2;

}

table>thead.thead-bottom-line{

border-bottom: 1px solid #eeeeef;

border-top: 1px solid #eeeeef;

background-color: #fff;

}

table>thead>tr>th.sorting-title{

height: 35px;

line-height: 35px;

border: 0px solid #000000;

font-weight: bold

}

table>tbody>tr.list-table-hover{

height: 30px;

line-height: 30px;

background-color: #fff !important;

border-top: 0px solid #eeeeef;

border-left: 0px solid #eeeeef;

border-right: 0px solid #eeeeef;

border-bottom: 1px solid #eeeeef;

}

table>tbody>tr:hover{

background-color: rgba(130, 219, 201, .5)!important;

}

table>tbody>tr.list-table-hover:hover{

height: 30px;

line-height: 20px;

background-color: rgba(130, 219, 201, .5)!important;

border-top: 0px solid #eeeeef;

border-left: 0px solid #eeeeef;

border-right: 0px solid #eeeeef;

border-bottom: 1px solid #eeeeef;

}

table>tbody>tr.list-table-hover.active{

background-color: rgba(130, 219, 201, .5)!important;

}

table>tbody>tr>td.sorting_content{

height: 30px;

line-height: 20px;

/*background-color: #fff;*/

border-top: 0px solid #eeeeef;

border-left: 0px solid #eeeeef;

border-right: 0px solid #eeeeef;

border-bottom: 1px solid #eeeeef;

}

table>tbody>tr>td.sorting_content:last-child{

height: 30px;

line-height: 30px;

min-width: 120px;

border-top: 0px solid #eeeeef;

border-left: 0px solid #eeeeef;

border-right: 0px solid #eeeeef;

border-bottom: 1px solid #eeeeef;

}

知识拓展：vue实现点击选中,其他的不选中方法

如下所示：

代码如下：

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

选中效果

ul li.active{

color: green;

}

• {{items.text}}

new Vue({

el: '#app',

data: {

navList: [

{text: '首页', isActive: true},

{text: '简介', isActive: false},

{text: '活动', isActive: false},

{text: '联系', isActive: false}

]

},

methods: {

activeFun: function(data){

this.navList.forEach(function(obj){

obj.isActive = false;

});

data.isActive = !data.isActive;

}

}

});

以上这篇vuejs选中当前样式active的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持512笔记。

注：关于vuejs选中当前样式active的实例的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js