本文实例为大家分享了vue实现单选和多选功能的具体代码，供大家参考，具体内容如下复制代码
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta>
<title>Document</title>
<script src="../vue.js"></script>
<style>
ul, li {
list-style-type: none;
}
* {
margin: 0;
padding: 0;
}
.border-1px {
position: relative;
}
.border-1px:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid rgba(7, 17, 27, .1);
content: ' ';
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
.border-1px::after {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
.border-1px ::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
#example {
margin: 20px;
}
h3 {
font-size: 26px;
margin-left: 20px;
height: 60px;
}
.self-radio {
display: none;
}
.self-radio + label {
-webkit-appearance: none;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 50px;
display: inline-block;
position: relative;
width: 30px;
height: 30px;
box-sizing: border-box;
}
.self-radio:checked + label {
border: 1px #47d9bf solid;
}
.self-radio:checked + label:after {
position: absolute;
top: 9px;
left: 9px;
content: ' ';
width: 10px;
height: 10px;
border-radius: 50px;
background: #47d9bf;
box-shadow: 0px 0px 5px 0px #47d9bf;
}
.check-area {
display: inline-block;
width: 400px;
padding: 12px 20px;
border: 1px solid #aaa;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
li {
height: 60px;
}
li .self-radio + label {
vertical-align: middle;
}
li span {
margin-left: 20px;
display: inline-block;
line-height: 60px;
font-size: 22px;
}
p {
height: 60px;
line-height: 60px;
margin-left: 20px;
}
p span {
color: #f00;
}
.btn {
margin: 20px auto;
width: 100%;
text-align: center;
}
.btn button {
width: 120px;
height: 40px;
line-height: 30px;
font-size: 16px;
color: #fff;
background: #47d9bf;
border: 1px #23d5b6 solid;
border-radius: 6px;
text-align: center;
outline: none;
