小程序图片制作_Vue中点击active并第一个默认选中

Vue中点击active并第一个默认选中功能的实现       这篇文章主要介绍了Vue中点击active并第一个默认选中功能的实现代码,代码简单易懂,非常不错具有一定的参考借鉴价值,需要的朋友可以参考下

1.遍历出来, 在click中赋值 遍历出来的mx。

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

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

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

 template 
 div id="app" 
 li v-for="(mx, key) in list" @click="ck(mx)" : 
 {{mx}}
 /li 
 /ul 
 /div 
 /template 
 script 
 export default {
 data() {
 return {
 list: ['网易', '腾讯', '爱奇艺', '优酷', '土豆', '斗鱼'],
 activeName: '网易'
 methods: {
 ck(mx) {
 this.activeName = mx
 /script 
 style lang="less" 
 .box {
 list-style: none;
 text-align: center;
 padding: 0;
 width: 85%;
 margin: auto;
 margin-top: 30px;
 ul {
 list-style: none;
 text-align: center;
 li {
 padding: 15px;
 border-radius: 30px;
 li.active {
 color: red;
 transition: all .8s;
 background: #000;
 color: #fff;
 /style 

知识点补充:

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- /router-link

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

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

而当使用:

router-link to="/article" exact-active- /router-link

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

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

总结

到此这篇关于Vue中点击active并第一个默认选中功能的实现的文章就介绍到这了,更多相关vue点击active内容请搜索凡科以前的文章或继续浏览下面的