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>
自我理解
参考链接://www.jb51.net/article/138185.htm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
用vue2.0实现点击选中active其他选项互斥的效果
在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示楼主用的是jq): <style> * { margin: 0; padding: 0; } li { list-style: none; width: 100px; margin-top: 10px; border: 1px solid red; } li:active { cursor: po
-
Vue2.0 实现单选互斥的方法
本文介绍了Vue2.0 实现单选互斥的方法,分享给大家,具体如下: 需要实现如上图的功能 1. 首次加载页面,根据data里的catgoryId高亮对应的选项 2. 点击某个选项,该选项高亮,其他去掉高亮 代码结构: <template> <dd @click="changeCategory(currCourseFirst.categoryId)" v-for="currCourseFirst in currCourse.currCourseFirst&qu
-
vue2.0获取鼠标位置的方法
如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <style> #canvas{ width: 500px; height:
-
VUE2.0中Jsonp的使用方法
本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据. 1.JSONP的用途和原理 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域.确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域. 2.JSONP的
-
Vue2.0 UI框架ElementUI使用方法详解
今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来 首先我们使用windows件+
-
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选.单选方案不合适,自己写了一个简单实用的.就短短的126行代码. <template> <div> <table> <tr> <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td> <td>产品名称</td> &
-
vue2.0父子组件及非父子组件之间的通信方法
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr
-
vue2.0结合DataTable插件实现表格动态刷新的方法详解
本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法.分享给大家供大家参考,具体如下: 产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈! 我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以
-
vue2.0 datepicker使用方法
1.使用vue-cli脚手架创建vue项目.在order列表页使用 vue-datepicker.按照文档操作,安装后,使用 myDatepicker from 'vue-datepicker'命令,导入组件.但是控制台提示 exports is not defined. 2.使用的是webpack包管理工具 1.导入代码 import myDatepicker from 'vue-datepicker' export default{ components: { VSelection, myD
-
vue2.0 父组件给子组件传递数据的方法
在父组件 App.vue 中引用子组件 A.vue,把 name 的值传给 A 组件. 1.安装 在桌面新建一个文件夹 $ cd 到文件中 $ npm install -g vue-cli $ vue init webpack . $ npm install $ npm run dev vue init webpack . 之后的选择解释 2.删除 1.删除App中的一些内容如下 2.删除components文件中的HelloWorld.vue 3.修改 修改App.vue 如下: <templ
-
vue2.0 子组件改变props值,并向父组件传值的方法
为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用: prop 作为初始值传入,由子组件处理成其它数据输出. 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的值初始化它: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 定义一个计算属性,处理 prop 的值并返回. prop
随机推荐
- ASP.NET对HTML页面元素进行权限控制(二)
- [Oracle] Data Guard CPU/PSU补丁安装详细教程
- JS开发中基本数据类型具体有哪几种
- js this函数调用无需再次抓获id,name或标签名
- Android通用流行框架大全【整理】
- Android7.0上某些PopuWindow出现显示位置不正确问题的解决方法
- javascript实现简单的省市区三级联动
- javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
- jQuery 获取URL参数的插件
- 编写高性能Lua代码的方法
- jquery绑定原理 简单解析与实现代码分享
- 推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
- 详解Android中通过Intent类实现组件间调用的方法
- 如何在Android中实现渐显按钮的左右滑动效果
- 探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
- PHP has encountered a Stack overflow问题解决方法
- hibernate通过session实现增删改查操作实例解析
- 从Oracle数据库中读取数据自动生成INSERT语句的方法
- iview通过Dropdown(下拉菜单)实现的右键菜单
- Java 集合概览(小结)