<RadioGroup v-model="selectType" type="button" @onchange="selectTypeChange">
<Radio label="全部"></Radio>
<Radio label="图文"></Radio>
<Radio label="文件"></Radio>
<Radio label="视频"></Radio>
</RadioGroup>

通过点击变化的钩子函数进行匹配

selectTypeChange(val) {
console.log(val)
let _this = this;
switch(val)
{
case "全部":
_this.init(_this.searchText,_this.active,_this.currentState, _this.chooseDate[0], _this.chooseDate[1], '','',1)
_this.selectType = '全部'
break;
case "图文": _this.init(_this.searchText,_this.active,_this.currentState, _this.chooseDate[0], _this.chooseDate[1], '05','00',1)
_this.selectType = '图文'
_this.st = '05'
break;
case "文件":
_this.init(_this.searchText, _this.active, _this.currentState, _this.chooseDate[0], _this.chooseDate[1], '10','00',1)
_this.selectType = '文件'
_this.st = '10'
break;
case "视频":
_this.init(_this.searchText, _this.active, _this.currentState, _this.chooseDate[0], _this.chooseDate[1], '15','00',1)
_this.selectType = '视频'
_this.st = '15'
break;
default:
}
},

利用单选框的单选特性作tab切换的更多相关文章

  1. Vue 单选框与单选框组 组件

    radio组件 v-model  : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...

  2. JS中获取页面单选框radio和复选框checkbox中当前选中的值

    单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...

  3. 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]

    val()方法不仅能设置元素的值,同时也能获取元素的值.另外,val()方法还有另外一个用处,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应的选项被选中,在 ...

  4. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. JS基础入门篇(四)—this的使用,模拟单选框,选项卡和复选框

    1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明 直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2. 在函数内部使用 有名函数 直接调 ...

  6. 一款兼容pc 移动端的tab切换

    利用touchslider.js插件来制作的tab切换,可任意修改很方便~~~ 样式: <style> .box-163css{ width:100%; position:relative ...

  7. 利用jQuery动态设置单选框的选中

    一.需要实现的效果 这里使用jQuery来实现.需要实现的效果如下:当下拉条改变时,单选框选中的值随之变化. <!DOCTYPE html> <html> <head&g ...

  8. Selenium WebDriver-操作单选框

    先判断按钮是否已经被选中 如果没有被选中,才可以点击 #encoding=utf-8 import unittest import time import chardet from selenium ...

  9. CSS魔法堂:改变单选框颜色就这么吹毛求疵!

    前言  是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用.若抛开input[type=radio] ...

随机推荐

  1. 45.Sort List(链表排序)

    Level:   Medium 题目描述: Sort a linked list in O(n log n) time using constant space complexity. Example ...

  2. 【笔记目录2】ASP.NET Core分布式项目实战

    当前标签: ASP.NET Core分布式项目实战 共2页: 上一页 1 2  11.ClientCredential模式总结 GASA 2019-03-11 12:59 阅读:26 评论:0 10. ...

  3. hashRouter and BrowserRouter

    <html><body> <div> <button class="btn" onclick="btnFun();"& ...

  4. linux 软件管理--yum工具及源码包

    目录 linux 软件管理--yum工具及源码包 一.yum基本概述 二.yum源的配置 三.yum实践案例 四.yum全局配置文件 五.yum签名检查机制 五.制作本地yum仓库 六.构建企业级yu ...

  5. centos7下的Firewalld

    一.介绍 防火墙守护 firewalld 服务引入了一个信任级别的概念来管理与之相关联的连接与接口.它支持 ipv4 与 ipv6,并支持网桥,采用 firewall-cmd (command) 或 ...

  6. 转载:jQuery的deferred对象详解

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  7. 转载:java面试题(一)

    1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: - 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注 ...

  8. 力扣 -- 寻找两个有序数组的中位数 Median of Two Sorted Arrays python实现

    题目描述: 中文: 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums ...

  9. Spring Bean 的生命周期,如何被管理的

    1. 实例化一个Bean,也就是我们通常说的new 2. 按照Spring上下文对实例化的Bean进行配置,也就是IOC注入 3. 如果这个Bean实现了BeanNameAware接口,会调用它实现的 ...

  10. css实现下拉框导航条

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...