Vue复选框默认样式以及取值问题

总结前的碎碎念

真的，今天之前我都不知道vue复选框的强大，说我菜那还真是不遗余力的菜。当然，作为一个刚步入前端的菜鸟，现在的项目是人生中的第二个项目，很多知识点都糊里糊涂，好像懂又好像不懂，真要运用起来还要不停地问度娘，我觉得这样下去不行，那么有空坐下来的时候就写个总结吧。以后再遇到相同的点回过头来看也方便，不用老是去翻别人的博客。

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

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

改变复选框的默认样式

参考博客：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复选框的强大了吗？这三个值的绑定都是可以根据需要变化的

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

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

没勾选之前

勾选之后

再来

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

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;
	}

分页中复选框的取值问题

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