当前位置: 首页 > news >正文

Vue2.0 实现互斥

clipboard.png

需要实现如上图的功能

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>

自我理解

clipboard.png

参考链接: http://cache.baiducontent.com...

相关文章:

  • Mongodb 分片集群部署
  • (三)Hyperledger Fabric 1.1安装部署-chaincode测试
  • SSL证书过期替换之踩坑总结
  • mysql_config_editor使用简介
  • 2、Android-UI(常用控件)
  • 简述C和C++的学习历程
  • Python使用数据库的基本流程
  • Mybatis 级联查询时只查出了一条数据
  • DevOps GitLab CICD 实践3——CI文件编写
  • 各国脑计划概览
  • JavaWeb xss攻击
  • EditText(插入表情图片)
  • 局域网的优点
  • Mybatis传递多个参数
  • 帆软2017百城巡展启动在即,力掀数据化管理之风
  • Create React App 使用
  • Docker容器管理
  • express如何解决request entity too large问题
  • FineReport中如何实现自动滚屏效果
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • mysql 数据库四种事务隔离级别
  • MySQL用户中的%到底包不包括localhost?
  • Node项目之评分系统(二)- 数据库设计
  • python_bomb----数据类型总结
  • Spring Boot快速入门(一):Hello Spring Boot
  • vue和cordova项目整合打包,并实现vue调用android的相机的demo
  • windows下mongoDB的环境配置
  • 飞驰在Mesos的涡轮引擎上
  • 强力优化Rancher k8s中国区的使用体验
  • 我建了一个叫Hello World的项目
  • 我是如何设计 Upload 上传组件的
  • 异步
  • nb
  • Android开发者必备:推荐一款助力开发的开源APP
  • NLPIR智能语义技术让大数据挖掘更简单
  • $redis-setphp_redis Set命令,php操作Redis Set函数介绍
  • (13)Hive调优——动态分区导致的小文件问题
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (WSI分类)WSI分类文献小综述 2024
  • (二)linux使用docker容器运行mysql
  • (附源码)springboot教学评价 毕业设计 641310
  • (黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
  • (三) diretfbrc详解
  • (三)centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • (转)ABI是什么
  • .NET 反射 Reflect
  • .NET/C# 使用反射注册事件
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .NET正则基础之——正则委托
  • .Net中间语言BeforeFieldInit
  • .w文件怎么转成html文件,使用pandoc进行Word与Markdown文件转化
  • @data注解_SpringBoot 使用WebSocket打造在线聊天室(基于注解)
  • [Algorithm][动态规划][子序列问题][最长递增子序列][摆动序列]详细讲解
  • [ASP.NET MVC]如何定制Numeric属性/字段验证消息