用wpf设计树状单选和多选功能_vue实现单选和多选功能

本文实例为大家分享了vue实现单选和多选功能的具体代码，供大家参考，具体内容如下复制代码

Document

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;

}

单选按钮

• :id="'radio-'+item.id"

  :data-id="'food-'+item.id" name="radio"

  :checked="index==0"

  :value="item.value"

  v-model="checkValue">

  {{item.value}}

您选择了：{{checkValue}}

按钮

{{checkId}}

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();

}

})

vue实现多选功能

Document

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;

}

多选按钮

• :id="'checkbox-'+item.id"

  :data-id="'food-'+item.id" name="radio"

  :value="item.value"

  v-model="checkValues"

  @click="setCheckValue($event,item)">

  {{item.value}}

您选择了：{{filterCheckValues}}

按钮

{{checkIds}}

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);

}

};

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