vue 实现多选
v-model
<template> <!--用户页面-选择关注--> <div class="follow"> <h4>选择关注</h4> <p>请选择您感兴趣的分类,给您最精准的推荐</p> <div> <ul class="flexStart"> <li v-for="(item,index) in followLists" :key="index"> <input type="checkbox" :id="item.id" :value="item.id" v-model="selectedIndex"/> <label :for="item.id" class="choice-item">{{item.txt}}</label> </li> </ul> </div> </div> </template> <script> export default { name: 'userFollow', data() { return { selectedIndex: [], followLists: [ {id: 0, txt: '入职体检'}, {id: 1, txt: '入职体检'}, {id: 2, txt: '入职体检'}, {id: 3, txt: '入职体检'}, {id: 4, txt: '入职体检'} ] } } } </script> <style scoped> h4 { font-size: 18px; } .follow { padding: 30px 0 0 10px; float: left; width: 400px; color: #0c0c0c; } .follow h4 { color: #358ee7; } .follow p { margin-bottom: 12px; }
// 隐藏input .follow ul li input { display: none; }
// 设置lable样式 .choice-item { float: left; width: 120px; height: 36px; line-height: 36px; text-align: center; border-left: 6px solid #d6d6d6; background-color: #eaeaea; margin-bottom: 16px; margin-right: 10px; cursor: pointer; }
// 设置选中项label样式
input:checked + .choice-item { color: #fff; border-left: 6px solid #0a69c7; background-color: #358ee7; } </style>