效果图
template:
<
template
>
<
div
>
<
p
>我的爱好
</
p
>
<
div
class=
"box"
v-for="(
option,
index)
in
option"
:key="
index"
>
<
input
type=
"checkbox"
v-model="
checked"
:id="
option"
:value="
option"
>
<
label
:for="
option"
>{{
option}}
</
label
>
</
div
>
<
p
>{{
checked}}
</
p
>
</
div
>
</
template
>
vue:
<
script
>
export
default {
data() {
return {
checked: [],
option: [
"打篮球",
"跑步",
"读书",
"听音乐",
"打游戏",
"交友"]
};
},
mounted() {}
};
</
script
>
css:
<
style
>
div.box {
margin:
20px
3px;
display:
inline-block;
}
input {
display:
none;
}
input[
type=
"checkbox"
] +
label {
width:
100px;
height:
30px;
border:
1px
solid
#ccc;
display:
inline-block;
line-height:
28px;
text-align:
center;
margin:
3px
0;
box-sizing:
border-box;
}
input[
type=
"checkbox"
]:checked +
label {
background:
#333;
color:
#fff;
}
</
style
>