正常我们想要的复选框效果是一个框对应一个描述文字:
<div>
<input type="checkbox" name="test" value="123">123
<input type="checkbox" name="test" value="456">456
<input type="checkbox" name="test" value="789">789
</div>
效果:
如果v-for直接加在input标签上,如:
<input type="checkbox" name="test" v-for="c in ctType" v-bind:key="c" value="c">{{c}}
相当于只重复展示框,然后渲染变量c,但v-for循环值c无法传递给{{c}}
,因此效果是这样的:
可以在input外包裹一层label标签,在label上循环:
ctType:["Vue.js","React.js","Angular.js"]
<label v-for="c in ctType" v-bind:key="c">
<input type="checkbox" name="ctType" value="c">{{c}}
</label>
效果: