关于动态生成表格 中checkout与label绑定问题

在动态生成列表表格时 遇到了一个很小很简单很简单但是很细节性的问题 当时比较着急 所以不够细心 忘记了这一步。。。。。

在这里我自己举一个场景例子吧：

现在需要动态生成table表格项 拿到接口数据开始渲染到表格

在这里不单单除了table 很多场景我相信都会用到 type为checkbox 的input

为了提高用户体验 都会习惯性使用 label 与 checkout 绑定

我们都知道 label需要绑定input中的id值

但这里我们要注意 要给input中的id值进行动态绑定 不要写死 如果写死就会导致你渲染出来的所有checkout项 你去点击其它的checkout 只会使第一个checkout的状态变化

以下使用简单的代码在阐述一下：

 

在这里我简单使用html写了一个例子  动态生成input  这时 inpout中的id 与 label中的for都是写死的 这样就导致 我们点击two时 one的checkout会发生变化   即使下面 在渲染出来three  four.......我们任意点击某个 变化的永远是one 因为我们是动态渲染的 在这里只是写了一个基本样式  所以在我们渲染出来的所有input与label  它们中的id 与for绑定永远都是我们写死的值

这是个很小的问题 但是有时候在我们赶进度时 往往忽略了这个 这时候只需呀将input中的id与；label中的for动态绑定一个唯一值比如 id就可以了 

 这样就解决了这个小问题 但是一定注意当中的字符串与属性值的拼接哦~~~

我多次强调这是个非常简单问题 即使很多大佬看到也请勿喷 只是把博客当成了自己工作学习的一个记录平台而已. 起码对一些初学者还是有一定帮助的

毕竟我相信在做的各位大佬也是一步一步这样走来的