利用单选框的单选特性作tab切换
<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切换的更多相关文章
- Vue 单选框与单选框组 组件
radio组件 v-model : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...
- JS中获取页面单选框radio和复选框checkbox中当前选中的值
单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...
- 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]
val()方法不仅能设置元素的值,同时也能获取元素的值.另外,val()方法还有另外一个用处,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应的选项被选中,在 ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS基础入门篇(四)—this的使用,模拟单选框,选项卡和复选框
1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明 直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2. 在函数内部使用 有名函数 直接调 ...
- 一款兼容pc 移动端的tab切换
利用touchslider.js插件来制作的tab切换,可任意修改很方便~~~ 样式: <style> .box-163css{ width:100%; position:relative ...
- 利用jQuery动态设置单选框的选中
一.需要实现的效果 这里使用jQuery来实现.需要实现的效果如下:当下拉条改变时,单选框选中的值随之变化. <!DOCTYPE html> <html> <head&g ...
- Selenium WebDriver-操作单选框
先判断按钮是否已经被选中 如果没有被选中,才可以点击 #encoding=utf-8 import unittest import time import chardet from selenium ...
- CSS魔法堂:改变单选框颜色就这么吹毛求疵!
前言 是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用.若抛开input[type=radio] ...
随机推荐
- 这么简单的 Redis 面试题都不懂,怎么拿offer?
来源:mp.weixin.qq.com/s/daBkliC8dAT_zYyoLiS7WA 随着系统访问量的提高,复杂度的提升,响应性能成为一个重点的关注点.而缓存的使用成为一个重点.redis 作为缓 ...
- #1062 - Duplicate entry '1' for key 'PRIMARY'
insert into db1.table_name_xxx select * from db2.table_name_xxx 从一张表导入到另一张表时出错. 默认是两张字段结构相同的情况 原因: 1 ...
- 从现在开始强迫自己使用 Reflect
静态方法 Reflect.apply(target, thisArg, args) 等同于 Function.prototype.apply.call(func, thisArg, args) Ref ...
- HTML学习笔记(基础部分)
一.基本概念 1.HTML:超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言. 2.HTML文档的后缀名:.html 或 .htm 3.标签:由尖括 ...
- 设计模式--简单工厂(Simple Factory)
工厂模式是最常用的一种创建型模式,通常所说的工厂模式一般是指工厂方法模式.本篇是是工厂方法模式的“小弟”,我们可以将其理解为工厂方法模式的预备知识,它不属于GoF 23种设计模式,但在软件开发中却也应 ...
- java 多线程间通信(一)
synchronized同步 package com.test7; public class Run { public class MyObject { private int a; public M ...
- Apache+tomcat 动静分离
环境准备: Centos7 需要软件 jdk-8u45-linux-x64.tar.gz apache-tomcat-.tar.gz apr-.tar.gz apr-util-.tar.gz pcre ...
- go语言从例子开始之Example19.接口
接口 是方法特征的命名集合. Example: package main import "fmt" //让方法,实现api这个接口. type api interface{ get ...
- 【leetcode】757. Set Intersection Size At Least Two
题目如下: 解题思路:贪心算法.首先把intervals按第二个元素从小到大排序,然后遍历intervals,如果集合S和intervals[i]没有交集,那么把intervals[i]的最大值和次大 ...
- Springboot解决使用@Scheduled创建任务时无法在同一时间执行多个任务的BUG
1.在启动类使用 @SpringBootApplication @EnableJpaRepositories(repositoryFactoryBeanClass = MyRepositoryFact ...