Vue中点击活跃并第一个默认选中功能的实现

　　在jQuery中:

　　

就是让第一个选中,其他的不选中!

　　

当点击后当前选中,其他不选中。

　　

有一种绕口令:东边的喇嘛买了西边的喇叭

　　

o ((⊙﹏⊙)) o

　　

　　

1。遍历出来,在点击中赋值遍历出来的mx。

　　

2.类进行决定是否显示,一点击就把对应的mx赋到activeName中

　　

3。此时activeName就和mx一模一样的文本,然后返回一个真正能显示当前的了

　　

4。把最后一个瑕疵补上,让第一个默认选中。就是把activeName放一个数值就行了

　　

Vue中点击活跃并第一个默认选中功能的实现

　　 　　 　　& lt; template> 　　& lt; div id=坝τ谩北? 　　& lt; ul> 　　& lt;李v=" (mx、关键)名单”@click=癱k (mx)”:类="[{活跃:activeName==mx}]“比; 　　{{mx}} 　　& lt;/li> 　　& lt;/ul> 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{ 　　数据(){ 　　返回{ 　　列表:['网易”、“腾讯”、“爱奇艺”,“优酷”,“土豆”,“斗鱼”), 　　activeName:“网易” 　　} 　　}, 　　方法:{ 　　ck (mx) { 　　这一点。activeName=mx 　　} 　　} 　　} 　　& lt;/script> 　　& lt;风格lang=吧佟北? 　　.box { 　　list-style:没有; 　　text-align:中心; 　　填充:0; 　　宽度:85%; 　　保证金:汽车; 　　margin-top: 30 px; 　　 　　ul { 　　list-style:没有; 　　text-align:中心; 　　 　　李{ 　　填充:15 px; 　　border - radius: 30 px; 　　} 　　 　　李。活跃的{ 　　颜色:红色; 　　过渡:所有。8; 　　背景:# 000; 　　颜色:# fff; 　　} 　　} 　　} 　　& lt;/style> 　　 　　

　　

exact-active-class和活动课的区别

　　

router-link默认情况下的路由是模糊匹配,例如当前路径是//1条那么也会激活& lt; router-link="/文章“祝辞,所以当设置exact-active-class以后,这个router-link只有在当前路由被全包含匹配时才会被激活exact-active-class中类的,例如:

　　

<代码> & lt; router-link="/文章“活动课=皉outer-active祝辞& lt;/router-link>

　　

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

　　

<代码> & lt; a href=" https://www.yisu.com/zixun//文章“类=皉outer-active”rel=皀ofollow”祝辞& lt;/a>

　　

而当使用:

　　

<代码> & lt; router-link="/文章“exact-active-class=皉outer-active祝辞& lt;/router-link>

　　

当用户访问/文章/1时,不会激活这个链接的类:

　　

<代码> & lt; a href=" https://www.yisu.com/zixun//文章“rel=皀ofollow”祝辞& lt;/a>

　　

　　

到此这篇关于Vue中点击活跃并第一个默认选中功能的实现的文章就介绍到这了,更多相关Vue点击活跃的内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

Vue中点击活跃并第一个默认选中功能的实现