Vue2.0 实现单选互斥的方法
更新时间：2018年04月13日 09:21:48 作者：懒惰的小白
本篇文章主要介绍了Vue2.0 实现单选互斥的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了Vue2.0 实现单选互斥的方法，分享给大家，具体如下：
需要实现如上图的功能
1. 首次加载页面，根据data里的catgoryId高亮对应的选项
2. 点击某个选项，该选项高亮，其他去掉高亮
代码结构：
<template>
<dd @click="changeCategory(currCourseFirst.categoryId)"
v-for="currCourseFirst in currCourse.currCourseFirst"
:key="currCourseFirst.categoryId"
:class="resultCategoryId === currCourseFirst.categoryId ? 'active': ''" >
{{currCourseFirst.name}}
</dd>
</template>
<script>
export default{
data() {
return {
categeryId: this.$route.query.categoryId,
typeId: this.$route.query.typeId
}
},
methods: {
changeCategoryId(categoryId) {
this.categoryId = categoryId
}
},
computed: {
resultCategoryId(){
return this.categoryId
}
}
}
</script>
自我理解
参考链接：https://www.jb51.net/article/138185.htm
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
本篇文章主要介绍了vue addRoutes实现动态权限路由菜单的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了详解Vue自定义过滤器的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。2017-01-01
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
组件中多个el-upload存在导致上传图片失效的问题及解决
这篇文章主要介绍了组件中多个el-upload存在导致上传图片失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本文主要介绍了SpringBoot结合Vue3实现简单的前后端交互,结合实际案例,说明了如何实现前后端数据的交互,具有一定的 参考价值,感兴趣的可以了解一下2023-08-08
antd配置config-overrides.js文件的操作
这篇文章主要介绍了antd配置config-overrides.js文件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
父组件向子组件传值，使用 props：可以通过在子组件上绑定 props，然后在父组件中通过 v-bind 绑定相应的数据来传递数据，这篇文章主要介绍了Vue 组件之间传值的方法,需要的朋友可以参考下2023-12-12
今天小编就为大家分享一篇vue项目初始化到登录login页面的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了关于el-col的使用,占据宽度的应用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果，本文给大家分享在实现过程中遇到问题，需要的朋友一起看看吧2020-02-02
最新评论