vuejs选中当前样式active的实例

如下所示：

<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的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现active点击切换方法

    循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click="active(index)" 2.将索引值传入class(索引等于几就第几个添加active类) :class="{active:index==ins}" 3.在data里边添加ins:0(表示默认第一个添加active类) data{ ins:0 } 4.最后在methods里边添加方法 ctive (num) { this.ins=num } 非循环的情况: 1.在标签内写入点击

  • 用vue2.0实现点击选中active其他选项互斥的效果

    用vue2.0实现点击选中active其他选项互斥的效果

    在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示楼主用的是jq): <style> * { margin: 0; padding: 0; } li { list-style: none; width: 100px; margin-top: 10px; border: 1px solid red; } li:active { cursor: po

  • vuejs选中当前样式active的实例

    如下所示: <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"

  • vue中选中多个选项并且改变选中的样式的实例代码

    1:HTML: <ul class="content"> <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id"> <div>{{item.name}}</d

  • Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

    解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

  • Vue条件循环判断+计算属性+绑定样式v-bind的实例

    Vue.js条件与循环 1.条件判断 (1)v-if, <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> </template> </div> <script> new Vue({ el:'#app', data:{ seen:true,

  • vue 导航内容设置选中状态样式的例子

    如图所示,我们一般需要切换的时候选中导航给个active样式, 而router-link 标签 在选中的时候  会自动给整个标签添加一个 router-link-active的class 可给router-link 标签里面的span.i标签如下设置,非常简单,下面是stylus的写法,不需要的话也可以写成平时的css写法 .router-link-active span i color: red 以上这篇vue 导航内容设置选中状态样式的例子就是小编分享给大家的全部内容了,希望能给大家一个参考

  • C#对Word文档的创建、插入表格、设置样式等操作实例

    using Word; 下面的例子中包括C#对Word文档的创建.插入表格.设置样式等操作: (例子中代码有些涉及数据信息部分被省略,重要是介绍一些C#操作word文档的方法) public string CreateWordFile(string CheckedInfo) ...{ string message = ""; try ...{ Object Nothing = System.Reflection.Missing.Value; Directory.CreateDirect

  • js改变style样式和css样式的简单实例

    js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-t

  • jquery根据一个值来选中select下的option实例代码

    jquery怎么根据一个值来选中select下的option <script type="text/javascript"> $(document).ready(function(){ var str=""; str = '${conclusionTypeName}'; $("#firstName option").each(function(){ alert($(this).text()); if($(this).text() ==

  • jQuery点击导航栏选中更换样式的实现代码

    jQuery点击导航栏选中更换样式的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • js 获取元素的具体样式信息getcss(实例讲解)

    如果想获取元素的某一个具体的样式属性值 1.元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的) console.log(box.style.height)  ->null 在真实项目中,这种方式不常用,因为不能为了获取值而把所有的样式都写在行内(无法实现html和css的分离) 2.使用window.getComputedStyle(当前操作的元素对象,当前元素的伪类[一般我们不用伪类写null])这个方法获取所有经过浏览器计算过的样式 所有经过浏览器

随机推荐