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 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
p5.js实现简单货车运动动画
Oct 23 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把session写入数据库示例
2014/02/26 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python selenium文件上传方法汇总
2020/11/19 Python
Python 监测文件是否更新的方法
2019/06/10 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
一套SQL笔试题
2016/08/14 面试题
中年人生感言
2014/02/04 职场文书
爱国口号
2014/06/19 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书