vue双向数据绑定——多选

效果图

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 >