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里选择超链接的实现代码
May 22 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 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
sae使用smarty模板的方法
2013/12/17 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
Python httplib模块使用实例
2015/04/11 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python实现电子产品商店
2019/02/26 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
服务员岗位职责
2014/01/29 职场文书
网页美工求职信
2014/02/15 职场文书
企业业务员岗位职责
2014/03/14 职场文书
网络技术专业求职信
2014/05/02 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
行政处罚告知书
2015/07/01 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python