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 同时提交多个Web表单的方法
Feb 19 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
vue使用element-ui按需引入
May 20 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP可逆加密/解密函数分享
2012/09/25 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python有参函数使用代码实例
2020/01/06 Python
python 实现简易的记事本
2020/11/30 Python
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
食品安全责任书范本
2015/05/09 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技