精华内容
下载资源
问答
  • exact-active-classactive-class 的区别 router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 <router-link to="/article">,所以当设置 exact-active-class 以后,这个 ...

    exact-active-class 和 active-class 的区别

    router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 <router-link to="/article">,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class,例如:

    <router-link to="/article" active-class="router-active"></router-link>

    当用户访问 /article/1 时会被激活为:

    <a href="#/article" class="router-active" rel="nofollow"></a>

    而当使用:

    <router-link to="/article" exact-active-class="router-active"></router-link>

    当用户访问 /article/1 时,不会激活这个 link 的 class:

    <a href="#/article" rel="nofollow"></a>

    转载于:https://www.cnblogs.com/kevoin/p/9914334.html

    展开全文
  • exact-active-classactive-class 的区别 router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 ,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含...

    exact-active-class 和 active-class 的区别

    router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 ,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class。


    当用户访问 /article/1 时会被激活为:

    <a href="#/article" class="router-active" rel="nofollow"></a>
    

    而当使用:

    <router-link to="/article" exact-active-class="router-active"></router-link>
    

    当用户访问 /article/1 时,不会激活这个 link 的 class:

    <a href="#/article" rel="nofollow"></a>
    
    展开全文
  • vue2.0中关于active-class

    千次阅读 2019-02-12 21:19:27
    vue2.0中关于active-class 一、首先,active-class是什么, active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换; 相关可查阅文档:...

    vue2.0中关于active-class
    一、active-class是什么,

    active-classvue-router模块的router-link组件中的属性,用来做选中样式的切换;

    官方文档:https://router.vuejs.org/zh-cn/api/router-link.html

    二、在 vue-router 中要使用 active-class 有两种方法:

    1、直接在路由js文件中配置linkActiveClass

    	export default new Router({
    	
    	  linkActiveClass: 'active',
    	
    	})
    

    2、在router-link中写入active-class

    	<router-link to="/home" class="menu-home" active-class="active">首页</router-link>
    

    三、最近在项目中出现一个问题,使用第二种方法添加 active-class,跳转到my页面后,两个 router-link 始终都会有选中样式,代码如下

    	<div class="menu-btn">
    	  <router-link to="/" class="menu-home" active-class="active">
    	    首页
    	  </router-link>
    	</div>
    	<div class="menu-btn">
    	  <router-link to="/my" class="menu-my" active-class="active">
    	    我的
    	  </router-link>
    	</div>
    

    四、后来发现是因为 to="/" 引起的,active-class 选择样式时根据路由中的路径去匹配,然后显示,

    例如:在my页面中,路由为 ,那么to="/”to="/my"都可以匹配到,所有都会激活选中样式

    五、要解决问题也有两种方式,都是通过加入一个 exact 属性

    1、直接在路由js文件中配置linkActiveClass

    	export default new Router({
    	
    	  linkExactActiveClass: 'active',
    	
    	})
    

    2、在router-link中写入exact

    	<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>
    

    六、不过我不是用 exact 这种方法去解决的,我的方法是

    	<router-link to="/home" class="menu-home" active-class="active" exact>首页</router-link>
    
    	//路由中加入重定向
    	{
    	  	path: '/',
    	  	redirect: '/home'
    	}
    
    展开全文
  • 一、首先,active-class是什么, active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换; 相关可查阅文档:https://router.vuejs.org/zh-cn/api/router-link.html 二、在vue-router中...

    一、首先,active-class是什么

    active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;

    相关可查阅文档:https://router.vuejs.org/zh-cn/api/router-link.html

     

    二、在vue-router中要使用active-class有两种方法

     

    1、直接在路由js文件中配置linkActiveClass

     

    export default new Router({

     

      linkActiveClass: 'active',

     

    })

     

    2、在router-link中写入active-class

     

    <router-link to="/home" class="menu-home" active-class="active">首页</router-link>

     

    三、最近在项目中出现一个问题,使用第二种方法添加active-class,跳转到my页面后,两个router-link始终都会有选中样式,代码如下

    <div class="menu-btn">
      <router-link to="/" class="menu-home" active-class="active">
        首页
      </router-link>
    </div>
    <div class="menu-btn">
      <router-link to="/my" class="menu-my" active-class="active">
        我的
      </router-link>
    </div>

    四、后来发现是因为 to="/" 引起的,active-class选择样式时根据路由中的路径去匹配,然后显示,

    例如在my页面中,路由为 ,那么to="/”和to="/my"都可以匹配到,所有都会激活选中样式

     

    五、要解决问题也有两种方式,都是通过加入一个exact属性

      1、直接在路由js文件中配置linkActiveClass

    export default new Router({

      linkExactActiveClass: 'active',

    })

      2、在router-link中写入exact

    <router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>

    六、不过我不是用exact这种方法去解决的,我的方法是

    <router-link to="/home" class="menu-home" active-class="active" exact>首页</router-link>
    
    路由中加入重定向
    {
      path: '/',
      redirect: '/home'
    }

     

    展开全文
  • active-class 是哪个组件的属性?

    千次阅读 2020-03-21 13:39:28
    一、首先,active-class是什么, active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换; 相关可查阅文档:https://router.vuejs.org/zh-cn/api/router-link.html 二、在v...
  • <router-link to="/news">唐诗</router-link> <router-link to="/news/exact/test" >test唐诗</router-link> <router-link to="/" exact> ...active-class和exact-active-class会修改默认class的名称
  • exact-active-class 配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。 <p> <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1&...
  • 1、正常写router-link标签的时候...2、如果不想用默认的router-link-active类名,可以在router-link中写上active-class="自定义的类名",即可 但是这么写,如果路由增多了,会导致在router-link标签中的active-cl...
  • active-class属于Vue哪一个modules,有什么作用 active-class 属于vue-router的样式方法 当routerlink标签被点击时将会应用这个样式 使用有两种方法 routerLink标签内使用 复制代码 <router-link to='/' active...
  • Vue - 列表动态绑定点击样式(active class)   动态绑定样式是我们经常用到的,所以直接整理了方便以后查阅 ...通过index与nowIndex(当前index)作比较,若相同,active-class则为true,显示...
  • enter-active-class="bounceIn",设置后无动画效果vue引用第三方类动画插件animate.css1. enter-active-class="bounceIn";leave-active-class="bounceOut",在animate.css中设置后无效2. 在Version - 4.1.0的animate...
  • vue-router中的router-link的active-class

    万次阅读 2018-08-26 17:13:24
    2、在router-link中写入active-class   问题:如果就这样,那么会出现一个问题,不管跳转到哪里,跳转到根目录的那个连接(to="/") 始终都会有选中样式    为什么会这样呢?查阅文档:...
  • active-class 是哪个组件的属性 active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换; 嵌套路由怎么定义 一级路由里面使用children数组配置子路由,就是嵌套路由 组件化模块化的区别 ...
  • 多网卡绑定:active-backup - 主备模式

    千次阅读 2018-12-14 17:06:48
    网卡绑定模式:active-backup - 主备模式一个网卡处于活跃状态,另一个处于备份状态,所有流量都在主链路上处理,当活跃网卡down掉时,启用备份网卡。系统:这里以Centos7为例(Centos6配置参数和7不一样)这里将em1...
  • button {{ action " toggleActive " }} data-test-toggle-button class = " {{ if active activeClass }} " > {{ if active " Deactivate " " Activate " }} </ button > 您可以代表它并进行如下测试: ...
  • ng-class的使用

    千次阅读 2015-03-19 10:30:05
    ng-class的使用 js function Ctr($scope) { $scope.isActive = true; } html <div ng-class="{true: 'active', false: 'inactive'}[isActive]"> </div>
  • &lt;Menu theme="light"... :active-name="user" :class="menuitemClasses" :open-names="['1']"&gt; &lt;Submenu name="1"&gt;
  • Uni-App - Class 与 Style 绑定

    千次阅读 2019-02-19 17:20:50
    为节约性能,我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中,支持语法和转换效果如下: class 支持的语法: &lt;view :class="{ active: isActive }"&gt;111&lt;/...
  • 07-jQuery-Class 操作

    千次阅读 2020-09-19 09:23:27
    //注意class active 前面没有加点 removeClass() 删除class <h1 class="active header"></h1> <script> $(function({ $("h1").removeClass("active"); // 这样只会删除 active class
  • AngularJS ng-class用法

    千次阅读 2016-08-12 01:36:04
    ng-class是AngularJS预设的一个指令,用于动态自定义dom元素的css class name,下面是其官网的api doc, AngularJS:ngClass ng-class在实际的应用场景中还是比较灵活的,而在AngularJS中一般有三种方式给元素的...
  • 绑定HTML Class#对象语法我们可以传给 v-bind:class一个对象,以...上面的语法表示active这个class存在与否取决于属性isActive的truthiness,可以在对象当中传入多个属性来动态切换classv-bind:class 指令也可以...
  • 【angular基础】ng-class的几种用法

    万次阅读 2019-06-15 16:27:27
    文章目录单个变量多个变量动态添加类名ng-repeat里的ng-class与ng-class-odd 单个变量 $scope.className = 'active'; <--变量--> <div ng-class="className">商品标题</div> <--字符串-->...
  • Vue入门 - Class 与 Style 绑定

    千次阅读 2017-04-06 18:11:15
    1 绑定class1.1 对象语法<div class="static" :class="{ active: isActive }"> 可将对象绑定在class属性上,动态切换class 若isActive为true,则class插入active 若isActive为false,则class移除active v-bind:...
  • 微信小程序设置 hover-class,实现点击变色效果 微信小程序中,可以用 hover-class 属性来指定元素的点击态效果。...不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation、hove...
  • ng-class的几种用法

    千次阅读 2018-07-19 15:00:59
    ng-class="{true : 'setting-active',false : 'setting-quiet'}[setTypeBtn]" setting-active,setting-quiet 是css样式,setTypeBtn是判断条件 true或者false; 方法2: 1.当你的列表是ng-repeat出来的...
  • ng-class几种写法

    千次阅读 2016-06-27 12:21:26
    > 最常用: ng-class="{'hide' : showTab != '1'}" 复杂判断: ng-class="{'EXISTED':'list-list-suc span-icon-warp', 'DROPED':'list-list-alarm span-icon-warp'}[item.status]
  • 注释:我上面的示例,是把菜单的name值设置成和路径一样的值,通过获取地址栏中的路径值,来动态的更新active-class的值,当然,其它的方法也都大同小异,有思路就有办法哈,如果看到的您有更好的办法,欢迎下方留言...
  • Vue--class,style,if,for概览

    千次阅读 2016-11-19 22:10:55
    标签的Class属性 class是一个属性,可以用v-bind来指定,普通的方式要求使用者自己控制字符串,但字符串的拼接略显麻烦,所以有专门的处理方式。... v-bind:class="{ active: isActive, 'text-danger': h
  • 微信小程序设置 hover-class,实现点击态效果 增强小程序触感,提高用户交互感知度 概念及注意事项 微信小程序中,可以用 hover-class ...目前支持 hover-class 属性的组件有三个:view、button、navigator。 不支持...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 327,075
精华内容 130,830
关键字:

active-class