总结前的碎碎念

改变复选框样式的需求之前也遇到过,也百度了很多回,总找不到理想的答案,都是一些处理起来很复杂的方案,可能百度的姿势不对。今天又遇到同样的需求,又问了一回度娘,这回姿势终于对了!原来这么简单!!

好了,闲话少说,开始干正事吧。

改变复选框的默认样式

参考博客:https://www.cnblogs.com/yuanyanbk/p/8136682.html

博主代码

<label class="checkBox"><input type="checkbox">全选</label>
input[type='checkbox']{
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    outline: none;
}

.checkBox input[type=checkbox]:checked{
   background: url("../images/checkbox_icon.png")no-repeat center;
}

v-for的复选框取值问题

网上关于vue复选框取值的博客都很多,但很少有v-for出来的数据,都是写死的数据。但是真正开发中数据都是变化的,大多是循环出来的数据。今天机缘巧合之下,终于让我搞懂了这个复选框到底是怎么一回事。我也算是对得起菜鸟这两个字了,这么久才搞懂。先上代码吧~

HTML代码片段


	<label id="label" 
        :for="item3" 
        @click="chooseType($event,index3)" 
        v-for="(item3,index3) in type" >
		<input type="checkbox" :value="item3" :id="item3" v-model="checkedValue">
		<div class="name">{{item3}}</div>
	</label>


​

JS代码

export default{
    data(){
        return{
            checkedValue: []
        }
    }
}

什么?还不懂?给你看看浏览器中渲染出来的数据你就懂了

F12审查元素渲染出来的结果如下

注意认真观察<label>标签中for值的变化,<input>标签中id值的变化和value值的变化

get到了vue复选框的强大了吗?这三个值的绑定都是可以根据需要变化的

2

接下来看看勾选之后的变化,data里面的checkedValue就是为测试而生的

我就不重复贴代码了,放张图吧

3

没勾选之前

4

勾选之后

5

再来

6

现在很清晰了有木有!然后就可以根据我们取到的值来处理逻辑啦啦啦

CSS代码片段

	input[type="checkbox"]{
		width: 16px;
		height: 16px;
		background: #F5F5F5;
		border: 1px solid #EAEAEA;
		float: left;
		margin-top: 12px;
		margin-right: 11px;
		cursor: pointer;
		-webkit-appearance:none;
		outline: none;
	}
	input[type="checkbox"]:checked{
		background: url(../../assets/images/tick.png) 0 0/14px 14px no-repeat;
	}

分页中复选框的取值问题

我的天,再回头看自己曾经遇到的问题,找不到了!!香菇,反省,以后有什么新发现一定要及时记录!!!

 

 

Logo

前往低代码交流专区

更多推荐