我要评论本文实例为大家分享了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;
}
.btn button:hover {
background: #23d5b6;
}
</style>
</head>
<body>
<div id="example">
<h3>单选按钮</h3>
<div class="check-area" v-show="items.length!=0">
<ul>
<li class="border-1px" v-for="(item,index) in items">
<input class="self-radio" type="radio"
:id="'radio-'+item.id"
:data-id="'food-'+item.id" name="radio"
:checked="index==0"
:value="item.value"
v-model="checkvalue">
<label :for="'radio-'+item.id" @click="setcheckvalue(item)"></label>
<span>{{item.value}}</span>
</li>
</ul>
<p>您选择了：<span>{{checkvalue}}</span></p>
<div class="btn">
<button @click="showcheck(checkid)">按钮</button>
<span>{{checkid}}</span>
</div>
</div>
</div>
<script>
var itemdata = [{id: '20170811001', value: '香蕉'},
{id: '20170811002', value: '苹果'},
{
id: '20170811003',
value: '梨子'
}, {id: '20170811004', value: '葡萄'}]
//itemdata = [];
var vm = new vue({
el: '#example',
data: {
items: '',
checkvalue: '',
checkid: ''
},
methods: {
init: function () {
},
initdata: function () {
var self = this;
self.items = itemdata;
if (itemdata.length != 0) {
self.checkvalue = self.items[0].value;
self.checkid = 'food-' + self.items[0].id
}
},
setcheckvalue: function (item) {
this.checkid = 'food-' + item.id;
}
,
showcheck: function () {
console.log(this.checkid)
}
},
mounted: function () {
this.initdata();
}
})
</script>
</body>
</html>
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-checkbox {
display: none;
}
.self-checkbox + label {
margin-top: 16px;
-webkit-appearance: none;
background-color: #fff;
border: 2px solid #aaa;
border-radius: 5px;
display: inline-block;
position: relative;
width: 30px;
height: 30px;
box-sizing: border-box;
vertical-align: top;
}
.self-checkbox:checked + label {
border: 2px #47d9bf solid;
}
.self-checkbox:checked + label:after {
display: inline-block;
text-align: center;
content: '√';
width: 100%;
height: 30px;
line-height: 26px;
color: #47d9bf;
font-size: 18px;
text-shadow: 0px 0px 5px #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;
}
.btn button:hover {
background: #23d5b6;
}
</style>
</head>
<body>
<div id="example">
<h3>多选按钮</h3>
<div class="check-area" v-show="items.length!=0">
<ul>
<li class="border-1px" v-for="(item,index) in items">
<input class="self-checkbox" type="checkbox"
:id="'checkbox-'+item.id"
:data-id="'food-'+item.id" name="radio"
:value="item.value"
v-model="checkvalues"
@click="setcheckvalue($event,item)">
<label :for="'checkbox-'+item.id"></label>
<span>{{item.value}}</span>
</li>
</ul>
<p>您选择了：<span v-show="checkvalues.length">{{filtercheckvalues}}</span></p>
<div class="btn">
<button @click="showcheck(checkids)">按钮</button>
<span v-show="checkids.length">{{checkids}}</span>
</div>
</div>
</div>
<script>
var itemdata = [{id: '20170811001', value: '香蕉'},
{id: '20170811002', value: '苹果'},
{
id: '20170811003',
value: '梨子'
}, {id: '20170811004', value: '葡萄'}]
//itemdata = [];
var vm = new vue({
el: '#example',
data: {
items: '',
checkvalues: [],
checkids: []
},
computed: {
filtercheckvalues: function () {
var value = this.checkvalues;
var revalue = '';
for (var i = 0; i < value.length; i++) {
revalue += value[i] + '、'
}
revalue = revalue.substring(0, revalue.length - 1)
return revalue;
}
},
methods: {
initdata: function () {
var self = this;
self.items = itemdata;
if (itemdata.length != 0) {
// self.checkvalues[0] = self.items[0].value;
// self.checkids[0] = 'food-' + self.items[0].id;
}
},
setcheckvalue: function (ev, item) {
var id = 'food-' + item.id;
if (ev.target.checked) {
this.checkids.push(id);
} else if (this.checkids.indexof(id) > -1) {
this.checkids.remove(id);
}
}
,
showcheck: function () {
console.log(this.checkids)
}
},
filter: {},
mounted: function () {
this.initdata();
}
})
array.prototype.remove = function (val) {
var index = this.indexof(val);
if (index > -1) {
this.splice(index, 1);
}
};
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论