vue2实现自定义样式radio单选框
先上效果
<div class="reply">
主编已回复:
<div class="radio-box" v-for="(item,index) in radios" :key="item.id">
<span class="radio" :class="{'on':item.isChecked}"></span>
<input v-model="radio" :value="item.value" class="input-radio" :checked='item.isChecked' @click="check(index)" type="radio">{{item.label}}
</div>
</div>
js:
data() {
return {
radio: '1',
radios:[
{
label: '是',
value:'1',
isChecked: true,
},
{
label: '否',
value:'2',
isChecked: false,
},
{
label: '全部',
value:'3',
isChecked: false,
},
]
}
},
methods: {
check(index) {
// 先取消所有选中项
this.radios.forEach((item) => {
item.isChecked = false;
});
//再设置当前点击项选中
this.radio = this.radios[index].value;
// 设置值,以供传递
this.radios[index].isChecked = true;
console.log(this.radio);
}
}
样式:
.radio-box{
display: inline-block;
position: relative;
height: 25px;
line-height: 25px;
margin-right: 5px;
}
.radio {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
cursor: pointer;
background-image: url(../../../common/images/radio.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.input-radio {
display: inline-block;
position: absolute;
opacity: 0;
width: 25px;
height: 25px;
cursor: pointer;
left: 0px;
outline: none;
-webkit-appearance: none;
}
.on {
background-position: -25px 0;
}
vue2实现自定义样式radio单选框的更多相关文章
- 基于CSS3自定义发光radiobox单选框
之前我们分享过一些CSS3和HTML5实现的自定义checkbox和Radiobox,比如纯CSS3美化Checkbox和Radiobox按钮,不仅外观唯美,而且Radiobox选中时还有动画效果.今 ...
- elementUI 学习入门之 radio 单选框
Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio l ...
- Radio 单选框
Radio 单选框 在一组备选项中进行单选 ¶基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着 ...
- TagHelper+Layui封装组件之Radio单选框
TagHelper+Layui封装组件之Radio单选框 标签名称:cl-radio 标签属性: asp-for:绑定的字段,必须指定 asp-items:绑定单选项 类型为:IEnumerable& ...
- 前端 HTML form表单标签 input标签 type属性 radio 单选框
<input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...
- 纯css3简单实用的checkbox复选框和radio单选框
昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览 源码下载 ...
- 纯css3实现的超炫checkbox复选框和radio单选框
之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览 源码下载 这个实例完全由css3实现 ...
- layui 获取radio单选框选中的值
Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio& ...
- selenium死活定位不到元素以及radio单选框点击不生效
今天操作一个单选框浪费太多时间,现在其实很简单得东西,记录一下: 1,问题一,定位不到 如图,使用selenium IDE和xpath helper都试过,无法成功定位到这个单选框,实际上是因为,这个 ...
随机推荐
- 洛谷P2365 任务安排 [解法二 斜率优化]
解法一:http://www.cnblogs.com/SilverNebula/p/5926253.html 解法二:斜率优化 在解法一中有这样的方程:dp[i]=min(dp[i],dp[j]+(s ...
- 【Codeforces Round #506 (Div. 3) 】
A:https://www.cnblogs.com/myx12345/p/9844334.html B:https://www.cnblogs.com/myx12345/p/9844368.html ...
- MySQL导出数据库、数据库表结构、存储过程及函数【用】
一.导出数据库 我的mysql安装目录是D:\Program Files\MySQL\MySQL Server 5.5\bin\,导出文件预计放在D:\sql\ 在mysql的安装目录执行命令: my ...
- 强大的stringstream
[本文来自]http://www.builder.com.cn/2003/0304/83250.shtmlhttp://www.cppblog.com/alantop/archive/2007/07/ ...
- 关于整合spring+mybatis 第三种方式-使用注解
使用注解 1.与前两种方法一致.不过稍许不同的是beans.xml中配置的差异. <!-- 配置sqlSessionFactory --> <bean id="sqlSes ...
- js采用concat和sort将N个数组拼接起来的方法
<script type="text/javascript" > function concatAndSortArray(array1, array2) { if (a ...
- Java 新手进阶:细说引用类型
在前几天的帖子<Java性能优化[1]:基本类型 vs 引用类型>里,俺大概介绍了“引用类型”与“基本类型”在存储上的区别.昨天有网友在评论中批评说“引用类型变量和它所引用的对象”没区分清 ...
- Struts2的标签三大类是什么?
Struts2 标签 一 Struts标签的简介: Struts2 自己封装了一套标签,比 JSTL 强大,而且与 Struts2 中的其他功能无缝结合. 当然 Strust2 标签的内容很多,随着版 ...
- 用systemtap跟踪打印动态链接库的所有c++函数调用过程
http://gmd20.blog.163.com/blog/static/168439232015475525227/ 用systemtap跟踪打印动态链接库的所有c++函数 ...
- HDU 1501
Zipper Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...