普通html和vue单选框的样式,vue2实现自定义样式radio单选框

先上效果

squares.svg

主编已回复:

{{item.label}}

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;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dev C++详细配置

首先在我们进行Dev C配置之前,Dev C一定是安装完毕的。 Dev C安装完毕 点击Finish进行Dev C的配置 首次使用 Dev C 还需要简单的配置,包括设置语言、字体、和主题风格。 第一次启动 Dev C 后,提示选择语言。 这里我们选择简体中文&#x…

用html编写一幅简单的画,使用html5画简单的折线图

//得到画布var can1document.getElementByIdx_x_x_x("can");//得到画笔var cxtcan1.getContext("2d");//定义图表的数据,该方式为创建数组直接量的方式var sale_data[80,92,104,110,68,50,45,90,74,98,103];//首先为背景进行设置渐变的效果,表示…

没有bug队——加贝——Python 练习实例 17,18

17.题目: 输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。 程序分析:利用 while 或 for 语句,条件为输入的字符不为 \n。 注:char:字符串个数;space:空格个数;diagt&…

快速搞定PCA(主成分分析)(原理 代码 案例)

目录 一、基本介绍 1.1原理 1.2主成分分析的几何解释 1.3主要步骤 1.4主成分个数的选取原则 二、主成分分析代码 2.1MATLAB代码 2.2Python代码 三、实用案例 一、基本介绍 1.1原理 主成分分析是最常用的线性降维方法,通过某种线性投影,将高维的数…

html文件查找关键词,批处理查找文件关键字下一行内容

批处理命令 显示所要查找字符串所在行和下面一行内假设查找内容为“问问”,查找文件为“a.txt”,输出文件为“b.txt”。 在线等Echo Off&Setlocal EnabledelayedexpansionFor /f "tokens1* delims:" %%i in (Type a.txt^|Findstr /n "…

Dev C++ 实现Hello World

新建源文件 打开 Dev C,在上方菜单栏中选择“文件 --> 新建 --> 源代码”: 或者按下CtrlN组合键,都会新建一个空白的源文件,如下图所示: 在空白文件中输入本文开头的代码 注意 *表示源文件没有保存 在上方菜…

没有bug队——加贝——Python 练习实例 19,20

19.题目: 一个数如果恰好等于它的因子之和,这个数就称为"完数"。例如61+2+3.编程找出1000以内的所有完数。 程序分析:请参照程序python实例14。我就不在这里过多介绍了。 for j in range(2,1001):k []n …

数据包络分析(DEA)详解(以第八届宁夏省赛为例)

目录 一、基本介绍 1.1原理 1.2CCR模型 1.3BCC模型 二、代码 2.1MATLAB代码 2.2Python代码 三、案例分析 3.1案例介绍 3.2案例分析 3.3案例求解 一、基本介绍 1.1原理 数据包络分析有多种模型,主要为:CCR模型,BBC模型、交叉模型、A&…

Spring Boot EasyUI datagrid

jQueryEasyUI详解 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。 开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只…

MATLAB使用教程(三)——在文件中编程

1.把matlab编码调整为utf-8编码 首先,删除这个部分(一定先备份这个lcdata.xml文件,备份就是拷贝一个副本),我的是2016版,大概在这里,你们可以搜索以下: 然后,找到这个部分…

Spring Boot EasyUI edatagrid 扩展

edatagrid扩展组件详解 edatagrid组件是datagrid的扩展组件,增加了统一处理CRUD的功能,可以用在数据比较简单的页面。使用的时候需要额外引入jquery.edatagrid.js为了能够把后台自动捕获的异常显示到前台这里必须使用最新版本的jquery.edatagrid.js文件能…

MATLAB使用教程(4)——悄悄滴上手项目

目录 1.计算一元二次方程 2.看一元方程的图形 有个小疑问? 惊喜: 总结 1.计算一元二次方程 这一讲我们以科学计算开始,使用matlab计算精确度很高,我们可以尝试来计算一下黄金分割率(定义大家可以自行百度一下&am…

两万字详细爬虫知识储备,数据采集与清洗基础习题(一)头歌参考答案

数据采集习题参考答案,会持续更新,点个关注防丢失。为了方便寻找,按照头歌的门类从新整理了实训的分类,朋友们记得看标题哦,按标题寻找! 该篇为爬虫知识储备! 文章目录 实训一:HTM…

Spring Boot swagger之前后端分离

前后端分离详解 现在的趋势发展,需要把前后端开发和部署做到真正的分离做前端的谁也不想用Maven或者Gradle作为构建工具做后端的谁也不想要用Grunt或者Gulp作为构建工具前后端需要通过接口来协作 可能是JSON格式的RESTFul的接口可能是XML的接口重点是后台只负责数据…

MATLAB基础教程(5)——斐波那契数列

目录 前言 正文开始啦: 总体思路: 首先创建文件: 编写 fibo_use.m 文件的内容代码 编写 fibonacci_mine.m 文件中的代码 代码运行 总结: 前言 斐波那契数列是一个很有趣的数列,有趣的地方在两点,在…

数据采集与清洗基础习题(二)Python爬虫常用模块,头歌参考答案

数据采集习题参考答案,会持续更新,点个关注防丢失。为了方便查找,已按照头歌重新排版,朋友们按照头歌所属门类查找实训哦,该篇为Python爬虫常用模块。 创作不易,一键三连给博主一个支持呗。 文章目录 实…

Spring Boot freemarker导出word下载

freemarker详解 FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页、电子邮件、配置文件、源代码等)的通用工具。 它不是面向最终用户的,而是一个Java类库,是一款程序…

学生用计算机怎么累加,计算机一级OFFICE辅导:累加小技巧

我们在工作中常常需要在已有数值的单元格中再增加或减去另一个数。一般是在计算器中计算后再覆盖原有的数据。这样操作起来很不方便。考试大编辑推荐一个小技巧,可以有效地简化老式的工作过程。(1).创建一个宏:选择Excel选单下的“工具→宏→录制新宏”选…

不同进制之间的转化

将二进制、八进制、十六进制转换为十进制 二进制、八进制和十六进制向十进制转换都非常容易,就是“按权相加”。所谓“权”,也即“位权”。 假设当前数字是 N 进制,那么: 对于整数部分,从右往左看,第 i 位…

[刨根问底] 五分钟搞懂组合评价模型—模糊Borda (以2021 年大学生数模国赛C题为例)

组合评价模型—模糊Borda(Matlab) 我们的征途是星辰大海,而并非烟尘人间。 目录 组合评价模型—模糊Borda(Matlab) 一、模糊Borda法简介 二、模糊Borda法主要步骤 (1)计算隶属度 (2)计算模糊频数 (…