vue 列表循环——单项选则

原创 1130331201 随笔 vue 141阅读 2018-06-25 15:16:09 举报

<template>
<div>
<ul>

<li v-for="(item,index) in list">
<input type="radio" class="default-checkbox" :id="index" :value="index"/>
<label :for="index" class="default-label">
<span>{{item.name}}</span>
<span>{{item.number}}</span>
</label>
</li>

</ul>
</div>
</template>
<script>
var data=[
{name:"卡卡卡",number:"127889"},
{name:"啦啦啦",number:"12219"}
]

export default{
data(){
return{
list:data
}
}
}
</script>
<style>
ul li .default-checkbox{position:absolute;visibility:hidden}
ul li .default-checkbox+label{display:inline-block;float:left;width:100%}
ul li .default-checkbox:checked+label:after{
content: ‘‘;position: absolute;width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #333;
border-top-color: transparent;
border-right-color: transparent;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>

评论 ( 1 )
最新评论
亮丽的世界 2018-07-09 09:48:32 1F

input标签上得加一个name属性