<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. C++标准库的初探

    1,操作符 << 的原生意义是按位左移,例: 1 << 2; 其底层的意义是将整数 1 按位左移 2 位,即: 0000 0001  ==> 0000 0100: 2,重 ...

  2. 公司redis

    一: redis cluster介绍篇 1:redis cluster的现状 目前redis支持的cluster特性(已亲测): 1):节点自动发现 2):slave->master 选举,集群 ...

  3. python函数装饰器详解

    python装饰器(fuctional decorators)简单来说就是修改其他函数的函数. 这样的函数需要满足两个个条件: 1.不能修改原函数的源代码 2.不能改变原函数的调用方式 需要达到的效果 ...

  4. POJ 2412 /// 空间几何 经纬度转三维坐标 角度转弧度 法向量

    题目大意: 给定半径6378km的球上的 多个地点 及其  经纬度 多个询问 给定三个地点 A B C A与B的等距点在球上形成一个大圆 即球面上有一个到两点距离相等的大圆 且大圆所在平面垂直两点连线 ...

  5. JS字符串和数组之间的转换

    1.字符串转换为数组 var string = '123,456,789'; var stringResult = string.split(','); console.log(stringResul ...

  6. SourceTree 这是一个无效源路径/URL的 解决方法

    看网上的教程都解决不了,这是一个大坑,折腾了很久. 如果说你的项目存在,而不是url真的无效,那就是因为你的权限问题. 因为你的sourcetree登过其他账号,在sourceTree设置里面记录了他 ...

  7. 一、bootstrap-datepicker

    一.bootstrap-datepicker <!DOCTYPE html> <html> <head> <title></title> & ...

  8. ubuntu 搜狗输入法内存占用太多,卡顿不够处理办法

    1.  输入 free -m  查看是否内存不够导致卡顿 2. 输入  gnome-system-monitor 打开ubuntu 任务管理器 找到搜狗输入法结束进程 3. 完美解决

  9. C++ 浅析移位运算

    按位左移(<<): 按二进制形式把所有的数字向左移动对应的位数,高位移出(舍弃),低位的空位补零 按位右移(>>): 按二进制形式把所有的数字向右移动对应位移位数,低位移出(舍 ...

  10. 阿里云安装Cloudera Manager(草稿)

    选择三台同一局域网的阿里云服务器 最初使用阿里云.京东云.百度云的三台不同的服务器,遇到一些问题,没有解决,公网速度也没有保障,还是选择同一局域网的服务器吧 CM有三种不同的安装方式: 通过 Clou ...