关于label和input嵌套问题

label有一个辅助功能，那就是for属性绑定对应的值可以快速定位到对应的input。首先来看一下label的for绑定的值：

<label for="agree1">合同1</label>
<input type="checkbox" value="合同1" id="agree1">

以上效果是：点击“合同1”三个字，可以实现复选框的选中与取消，而不是特意点击到复选方框才能切换选中状态。

可以看出for绑定的值是input的id。
其实，如果dom元素的id名称不和js内置对象属性或全局变量有重名的情况下，该名称能从window原型链上进行查找的属性，Firefox、Chrome、IE 9-11都支持，没有形成标准，而且容易污染全局，造成各种冲突和错误，不推荐使用。

有时候表单项很多，如果都实现这种效果的话，定义一大堆id显然是不合理的。这时，可以用label包裹input标签来实现这种效果：

		<label >合同1
			<input type="checkbox" v-model="agree" value="合同1" id="agree1">
		</label>

点击文字就可以直接聚焦到复选框啦