推荐设备MORE

静态网页制作

静态网页制作

行业新闻

微信小程序的应用_vue完成单选和多选功用

日期:2021-01-11
我要分享
vue实现单选和多选功能       这篇文章主要为大家详细介绍了vue实现单选和多选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
 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 v-show="items.length!=0" 
 li v-for="(item,index) in items" 
 input 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 
 button @click="showCheck(checkId)" 按钮 /button 
 span {{checkId}} /span 
 /div 
 /div 
 /div 
 script 
 var itemData = [{id: '', value: '香蕉'},
 {id: '', value: '苹果'},
 id: '',
 value: '梨子'
 }, {id: '', 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;
 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 v-show="items.length!=0" 
 li v-for="(item,index) in items" 
 input 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 
 button @click="showCheck(checkIds)" 按钮 /button 
 span v-show="checkIds.length" {{checkIds}} /span 
 /div 
 /div 
 /div 
 script 
 var itemData = [{id: '', value: '香蕉'},
 {id: '', value: '苹果'},
 id: '',
 value: '梨子'
 }, {id: '', 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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。