加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

vuejs选中当前样式active的实例

发布时间:2020-12-17 02:13:31 所属栏目:百科 来源:网络整理
导读:如下所示: vue js代码 CSS代码 知识拓展:vue实现点击选中,其他的不选中方法 如下所示: 选中效果 div id="app" 以上这篇vuejs选中当前样式active的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

如下所示:

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 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,.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,.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实现点击选中,其他的不选中方法

如下所示:

选中效果

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!