vuejs选中当前样式active的实例


Posted in Javascript onAugust 22, 2018

如下所示:

<template>
 <div>
  <table id="longzhoufeng" class="table table-striped table-bordered" width="100%" style="border: 0 solid #fff;margin-top: 10px;">
   <thead class="thead-bottom-line">
   <tr>
    <th class="sorting-title">名称1</th>
    <th class="sorting-title">名称2</th>
    <th class="sorting-title">名称3</th>
    <th class="sorting-title">名称4</th>
   </tr>
   </thead>
   <tbody>
   <tr @click="activeHover(index)" class="list-table-hover" v-for="(item,index) in items" >
    <th class="sorting-title">{{item.text}}</th>
    <th class="sorting-title">{{item.text}}</th>
    <th class="sorting-title">{{item.text}}</th>
    <th class="sorting-title">{{item.text}}</th>
   </tr>
   </tbody>
  </table>
 </div>
</template>

vue js代码

<script>
 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<aLi.length;i++){
     arrLi.push(aLi[i])
    }
    for( var i=0; i<arrLi.length; i++ ){
     if(arrLi[i] !=this){
      $(arrLi[i]).removeClass("active")
     }

     if(!$(arrLi[i]).hasClass("active")){
      $(arrLi[index]).addClass("active")
     }else{
      $(arrLi[i]).removeClass("active")
     }
    }
   },
  }
 }
</script>

CSS代码

<style scoped>
 .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;
 }
</style>

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

如下所示:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>选中效果</title>
 <script src="../static/js/vue.min.js"></script>
 <style>
  ul li.active{
   color: green;
  }
 </style>

</head>
<body>

<div id="app">
 <ul>
  <li v-for="items in navList" :class="{active:items.isActive}" @click="activeFun(items)">
   <a>
    {{items.text}}
   </a>
  </li>
 </ul>
</div>

<script>
 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;
   }
  }
 });
</script>


</body>
</html>

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

Javascript 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 #Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 #Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 #Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 #Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 #Javascript
element-ui 设置菜单栏展开的方法
Aug 22 #Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 #Javascript
You might like
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javascript 数组排序函数
2009/08/20 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python操作kafka实践的示例代码
2019/06/19 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
得到Class的三个过程是什么
2012/08/10 面试题
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
迎国庆演讲稿
2014/09/15 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
医院见习总结
2015/06/24 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
anaconda python3.8安装后降级
2021/06/11 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers