【Vue】单选框、复选框的实现

说是Vue其实和原生并没有太大的区别。

单选框研究

原生html的单选框实现

用name属性来划分单选框小组

总结一下就是四个属性

type （单选框：radio，复选框：checkbox）
id
value
name/v-model(Vue)

点击label联动单选框实现效果

label中的for属性要和input中的id匹配

<input type="radio" id="g" value="坂田银时"name="favourite-character">
<label for="g">坂田银时</label>
<input type="radio" id="h" value="土方十四郎"name="favourite-character">
<label for="g">土方十四郎</label>

vue中靠绑定v-model，不需要name属性

<input type="radio" id="g" value="坂田银时" v-model="favouriteCharacter">
<label for="g">坂田银时</label>
<input type="radio" id="h" value="土方十四郎" v-model="favouriteCharacter">
<label for="g">土方十四郎</label>
<!-- 显示选中值 -->
<input :value="favouriteCharacter">

复选框vue实现

<!-- favouriteCity是数组 -->
<input type="checkbox"value="北京" v-model="favouriteCity">
<label for="beijing">北京</label>
<input type="checkbox" value="上海" v-model="favouriteCity">
<label for="shanghai">上海</label>
<input type="checkbox" value="深圳" v-model="favouriteCity">
<label for="shenzhen">深圳</label><input :value="favouriteCity">

最终效果

【Vue】单选框、复选框的实现相关推荐

js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
改变单选或者复选框的样式
原理是通过定位把以前的样式覆盖掉,就酱... 代码如下: css.checkbox{position: relative;padding-left: 8px;}.checkbox:before{con ...
php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
jQuery 单选框/复选框美化
对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事.在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现基础篇知识的实际应用. 纯CS ...
JQuery获取选中的元素（单选框复选框）及其他等
看注释 <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
html复选框美化插件,Labelauty – jQuery单选框/复选框美化插件
Labelauty – jQuery单选框/复选框美化插件分类:代码日期:2016-08-02 点击(38,744) 下载(0) 来源:未知收藏下拉框美化插件经常见到,如之前介绍过的 Drop ...
html正方形单选框代码,单选框/复选框
[html]代码库单选.复选框Demo function getSelectedEffect(effects) {//获取效果选项 for ( var i = 0; i < effects.l ...
EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例效果展示未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
单选框-复选框重置的方法
问题描述希望对于填报表中的编辑风格为单选钮或复选框的单元格能够进行重置.如男.女单选框,在报表初始化展现时是两个单选钮都不点选,当选择一项后,无法将其重新改成都不点选的状态,需要能对单选钮的单元格进 ...

【Vue】单选框、复选框的实现

单选框研究

点击label联动单选框实现效果

复选框vue实现

【Vue】单选框、复选框的实现相关推荐

最新文章

热门文章