<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. 组件化框架设计之Java SPI机制(三)

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 本篇文章将从深入理解java SPI机制来介绍组件化框架设计: ...

  2. Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法

    一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...

  3. C#链式编程

    一.基本链式格式 class Program { static void Main(string[] args) { Console.WriteLine("Hello World!" ...

  4. PHP copy() 函数

    定义和用法 copy() 函数复制文件. 该函数如果成功则返回 TRUE,如果失败则返回 FALSE. 语法 copy(file,to_file) 参数 描述 file 必需.规定要复制的文件. to ...

  5. Base64和3DES算法

    Base64加密算法 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息.它的优点是算法效率高,编码出来的结果比较简短,同时也具有不可读性. ...

  6. jdbc 数据库批处理insert操作

    package blob; import java.sql.Connection; import java.sql.PreparedStatement; import jdbc.utils.*; // ...

  7. Network基础(五):配置静态路由、配置浮动路由、配置多路由的静态路由、配置默认路由

    一.配置静态路由 目标: 配置路由接口IP地址并通过静态路由的配置实现全网的互通. 方案: 按如下网络拓扑配置接口IP地址并通过静态路由的配置实现全网的互通如下图所示: 步骤: 步骤一:配置静态路由 ...

  8. CKEditor的使用经历总结

    关于ckeditor的下载和引用网上有很多完整清晰的教程,就不在此多说了,主要说一些小问题. 这个插件,初次用的时候放不进背景图,放不进隐藏域,连class,id这些属性都放不进去,然后我进行了一些调 ...

  9. delphi 将Dll等生成资源文件

    资源文件一般为扩展名为res的文件,其自带的资源编译工具BRCC32.EXE(位于/Delphi/BIN目录下) 1.编写rc脚本文本用记事本或其它文本编辑器编写一个扩展名为rc的文件,格式分别为在资 ...

  10. centos6编译安装php7

    https://www.cnblogs.com/wenwei-blog/p/6261637.html https://www.cnblogs.com/imzye/p/5109770.html cent ...