先上效果

  1. <div class="reply">
  2. 主编已回复:
  3. <div class="radio-box" v-for="(item,index) in radios" :key="item.id">
  4. <span class="radio" :class="{'on':item.isChecked}"></span>
  5. <input v-model="radio" :value="item.value" class="input-radio" :checked='item.isChecked' @click="check(index)" type="radio">{{item.label}}
  6. </div>
  7. </div>

js:

  1. data() {
  2. return {
  3. radio: '1',
  4. radios:[
  5. {
  6. label: '是',
  7. value:'1',
  8. isChecked: true,
  9. },
  10. {
  11. label: '否',
  12. value:'2',
  13. isChecked: false,
  14. },
  15. {
  16. label: '全部',
  17. value:'3',
  18. isChecked: false,
  19. },
  20. ]
  21. }
  22. },
  23. methods: {
  24. check(index) {
  25. // 先取消所有选中项
  26. this.radios.forEach((item) => {
  27. item.isChecked = false;
  28. });
  29. //再设置当前点击项选中
  30. this.radio = this.radios[index].value;
  31. // 设置值,以供传递
  32. this.radios[index].isChecked = true;
  33. console.log(this.radio);
  34. }
  35. }

样式:

 
  1. .radio-box{
  2. display: inline-block;
  3. position: relative;
  4. height: 25px;
  5. line-height: 25px;
  6. margin-right: 5px;
  7. }
  8. .radio {
  9. display: inline-block;
  10. width: 25px;
  11. height: 25px;
  12. vertical-align: middle;
  13. cursor: pointer;
  14. background-image: url(../../../common/images/radio.png);
  15. background-repeat: no-repeat;
  16. background-position: 0 0;
  17. }
  18. .input-radio {
  19. display: inline-block;
  20. position: absolute;
  21. opacity: 0;
  22. width: 25px;
  23. height: 25px;
  24. cursor: pointer;
  25. left: 0px;
  26. outline: none;
  27. -webkit-appearance: none;
  28. }
  29. .on {
  30. background-position: -25px 0;
  31. }

vue2实现自定义样式radio单选框的更多相关文章

  1. 基于CSS3自定义发光radiobox单选框

    之前我们分享过一些CSS3和HTML5实现的自定义checkbox和Radiobox,比如纯CSS3美化Checkbox和Radiobox按钮,不仅外观唯美,而且Radiobox选中时还有动画效果.今 ...

  2. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  3. Radio 单选框

    Radio 单选框 在一组备选项中进行单选 ¶基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着 ...

  4. TagHelper+Layui封装组件之Radio单选框

    TagHelper+Layui封装组件之Radio单选框 标签名称:cl-radio 标签属性: asp-for:绑定的字段,必须指定 asp-items:绑定单选项 类型为:IEnumerable& ...

  5. 前端 HTML form表单标签 input标签 type属性 radio 单选框

    <input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...

  6. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  7. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  8. layui 获取radio单选框选中的值

    Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio& ...

  9. selenium死活定位不到元素以及radio单选框点击不生效

    今天操作一个单选框浪费太多时间,现在其实很简单得东西,记录一下: 1,问题一,定位不到 如图,使用selenium IDE和xpath helper都试过,无法成功定位到这个单选框,实际上是因为,这个 ...

随机推荐

  1. 洛谷P2365 任务安排 [解法二 斜率优化]

    解法一:http://www.cnblogs.com/SilverNebula/p/5926253.html 解法二:斜率优化 在解法一中有这样的方程:dp[i]=min(dp[i],dp[j]+(s ...

  2. 【Codeforces Round #506 (Div. 3) 】

    A:https://www.cnblogs.com/myx12345/p/9844334.html B:https://www.cnblogs.com/myx12345/p/9844368.html ...

  3. MySQL导出数据库、数据库表结构、存储过程及函数【用】

    一.导出数据库 我的mysql安装目录是D:\Program Files\MySQL\MySQL Server 5.5\bin\,导出文件预计放在D:\sql\ 在mysql的安装目录执行命令: my ...

  4. 强大的stringstream

    [本文来自]http://www.builder.com.cn/2003/0304/83250.shtmlhttp://www.cppblog.com/alantop/archive/2007/07/ ...

  5. 关于整合spring+mybatis 第三种方式-使用注解

    使用注解 1.与前两种方法一致.不过稍许不同的是beans.xml中配置的差异. <!-- 配置sqlSessionFactory --> <bean id="sqlSes ...

  6. js采用concat和sort将N个数组拼接起来的方法

    <script type="text/javascript" > function concatAndSortArray(array1, array2) { if (a ...

  7. Java 新手进阶:细说引用类型

    在前几天的帖子<Java性能优化[1]:基本类型 vs 引用类型>里,俺大概介绍了“引用类型”与“基本类型”在存储上的区别.昨天有网友在评论中批评说“引用类型变量和它所引用的对象”没区分清 ...

  8. Struts2的标签三大类是什么?

    Struts2 标签 一 Struts标签的简介: Struts2 自己封装了一套标签,比 JSTL 强大,而且与 Struts2 中的其他功能无缝结合. 当然 Strust2 标签的内容很多,随着版 ...

  9. 用systemtap跟踪打印动态链接库的所有c++函数调用过程

    http://gmd20.blog.163.com/blog/static/168439232015475525227/             用systemtap跟踪打印动态链接库的所有c++函数 ...

  10. HDU 1501

    Zipper Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...