checkbox与v-for:解决“只显示框,不显示选择文字”

正常我们想要的复选框效果是一个框对应一个描述文字:

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

效果:
checkbox与v-for:解决“只显示框,不显示选择文字”
如果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}},因此效果是这样的:
checkbox与v-for:解决“只显示框,不显示选择文字”

可以在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>

效果:
checkbox与v-for:解决“只显示框,不显示选择文字”

上一篇:点击多选框,el-checkbox绑定的值变化了,但是页面没有反应


下一篇:搬家第31天-citect2018中checkbox控件使用1