当前位置: 首页 > 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百城巡展启动在即,力掀数据化管理之风
  • [译]前端离线指南(上)
  • 【Leetcode】104. 二叉树的最大深度
  • github从入门到放弃(1)
  • Go 语言编译器的 //go: 详解
  • HTML5新特性总结
  • IE报vuex requires a Promise polyfill in this browser问题解决
  • Js基础知识(四) - js运行原理与机制
  • Making An Indicator With Pure CSS
  • PermissionScope Swift4 兼容问题
  • Shadow DOM 内部构造及如何构建独立组件
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • 安卓应用性能调试和优化经验分享
  • 机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹?
  • 经典排序算法及其 Java 实现
  • 类orAPI - 收藏集 - 掘金
  • 力扣(LeetCode)965
  • 爬虫进阶 -- 神级程序员:让你的爬虫就像人类的用户行为!
  • 浅谈Golang中select的用法
  • 线性表及其算法(java实现)
  • 一文看透浏览器架构
  • 原创:新手布局福音!微信小程序使用flex的一些基础样式属性(一)
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • FaaS 的简单实践
  • MPAndroidChart 教程:Y轴 YAxis
  • 函数计算新功能-----支持C#函数
  • ​html.parser --- 简单的 HTML 和 XHTML 解析器​
  • ​卜东波研究员:高观点下的少儿计算思维
  • #if #elif #endif
  • #我与Java虚拟机的故事#连载04:一本让自己没面子的书
  • #我与Java虚拟机的故事#连载16:打开Java世界大门的钥匙
  • $refs 、$nextTic、动态组件、name的使用
  • ( 10 )MySQL中的外键
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (八)Spring源码解析:Spring MVC
  • (搬运以学习)flask 上下文的实现
  • (独孤九剑)--文件系统
  • (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画...
  • (附源码)springboot家庭财务分析系统 毕业设计641323
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统