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内容请搜索凡科以前的文章或继续浏览下面的