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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
vue实现图书管理系统
Dec 29 Vue.js
详解如何在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
YII Framework框架教程之安全方案详解
2016/03/14 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
python热力图实现简单方法
2021/01/29 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
采购内勤岗位职责
2013/12/10 职场文书
劳动模范事迹材料
2014/01/19 职场文书
党校培训自我鉴定
2014/02/01 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
推广普通话标语
2014/06/27 职场文书
企业财务经理岗位职责
2015/04/08 职场文书