Vue2.0 实现单选互斥的方法


Posted in Javascript onApril 13, 2018

本文介绍了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>

自我理解

Vue2.0 实现单选互斥的方法

参考链接:https://3water.com/article/138185.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
详解JS面向对象编程
Jan 24 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
JavaScript实现异步图像上传功能
Jul 12 Javascript
vue实现路由切换改变title功能
May 28 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
Vue render深入开发讲解
Apr 13 #Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 #Javascript
vue组件的写法汇总
Apr 12 #Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 #Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 #Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 #Javascript
You might like
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python实现的rsa加密算法详解
2018/01/24 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python笔试面试题小结
2019/09/07 Python
Python socket模块方法实现详解
2019/11/05 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Django 解决由save方法引发的错误
2020/05/21 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
房地产推广策划方案
2014/05/19 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
杨善洲电影观后感
2015/06/04 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL