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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
watch是Vue实例的一个属性是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,下面这篇文章主要给大家介绍了关于vue中watch的实际开发笔记,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了前端框架Vue.js中Directive知识，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了Vue中的路由导航守卫导航解析流程,正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的2023-04-04
这篇文章主要介绍了vue router 路由跳转方法概述,使用到Vue的项目，我们最常见使用的就是Vue配套的Vue Router库，本文结合示例代码给大家详细讲解，需要的朋友可以参考下2022-12-12
vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来进行封装使用,下面我们就来看看vue3中自定义Hooks函数的使用吧2023-09-09
这篇文章主要介绍了Element el-row el-col 布局组件使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本文主要介绍了Vue-Element-Admin前端接入SSO的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
详解vuejs中执行npm run dev出现页面cannot GET/问题
这篇文章主要介绍了详解vuejs中执行npm run dev出现页面cannot GET/问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
vue 界面刷新数据被清除 localStorage的使用详解
今天小编就为大家分享一篇vue 界面刷新数据被清除 localStorage的使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue CLI 3搭建vue+vuex最全分析(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论