2018-11-26深入探讨<label>

1，所有主流浏览器都支持<label>标签

2，<label>的属性：for，from

for 属性规定 label 绑定到哪个表单元素。
form属性规定 label 字段所属的一个或多个表单。

注意："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

示例：
把文字和复选框绑定,当点击文字时，也相当于点击了复选框。
很好的改善了鼠标性能，和用户体验。

示例图片

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
    class1: false
  }
});
</script>
</body>