vue做單選只能選一個
<template>
<div class="list">
<!-- 多行多列單選 -->
<span>只能選一個</span>
<div class="list-group" v-for="(item,index) in items">
<div class="left">
<p>{{item.sex}}</p>
</div>
<div class="right" >
<div class="right-box" v-for="list in item.introduce" @click="check(item,list,index)">
<i class="iconfont" :class="checked == list.id?'icon-yuanyixuan':'icon-yuanweixuan'"></i>
<p >{{list.name}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
name: 'list',
data() {
return {
checked: '',
items: [
{
sex: '男愛豆',
introduce: [
{
name: '易烊千璽',
id: 1
},
{
name: '張一山',
id: 2
},
{
name: '朱亞文',
id: 3
}
]
},
{
sex: '女愛豆',
introduce: [
{
name: '迪麗熱巴',
id: 4
},
{
name: '楊紫',
id: 5
},
{
name: '鄭爽',
id: 6
}
]
}
]
}
},
methods: {
check(item,list,index) {
this.checked = list.id;
}
}
}
</script>
<style lang="less">
.list {
span {
display: inline-block;
width: 400px;
text-align: center;
margin-bottom: 10px;
}
.list-group {
width: 400px;
height: 50px;
.left {
float: left;
width: 100px;
}
.right {
float: right;
width: 300px;
.right-box {
display: inline-block;
width: 100px;
p {
display: inline-block;
}
.icon-yuanyixuan {
color: red;
}
}
}
}
}
</style>
每行可以選一個
<div class="list">
<!-- 多行多列單選 -->
<span>每行可以選一個</span>
<div class="list-group" v-for="(item,index) in items">
<div class="left">
<p>{{item.sex}}</p>
</div>
<div class="right" >
<div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">
<i class="iconfont" :class="item.isChecked == index ?'icon-yuanyixuan':'icon-yuanweixuan'"></i>
<p >{{list.name}}</p>
</div>
</div>
</div>
</div>
js
export default{
name: 'list',
data() {
return {
checked: '',
items: [
{
sex: '男愛豆',
isChecked: 0,
introduce: [
{
name: '易烊千璽',
},
{
name: '張一山',
},
{
name: '朱亞文',
}
]
},
{
sex: '女愛豆',
isChecked: 1,
introduce: [
{
name: '迪麗熱巴',
},
{
name: '楊紫',
},
{
name: '鄭爽',
}
]
}
]
}
},
methods: {
check(item,list,index) {
item.isChecked = index;
}
}
}
vue多選
<div class="list">
<span>終於可以多選了</span>
<div class="list-group" v-for="(item,index) in items">
<div class="left">
<p>{{item.sex}}</p>
</div>
<div class="right" >
<div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">
<i class="iconfont" :class="item.isChecked.indexOf(index) != -1 ?'icon-yuanyixuan':'icon-yuanweixuan'"></i>
<p >{{list.name}}</p>
</div>
</div>
</div>
</div>
js
export default{
name: 'list',
data() {
return {
checked: '',
items: [
{
sex: '男愛豆',
isChecked: [0],
introduce: [
{
name: '易烊千璽'
},
{
name: '張一山'
},
{
name: '朱亞文'
}
]
},
{
sex: '女愛豆',
isChecked: [0],
introduce: [
{
name: '迪麗熱巴'
},
{
name: '楊紫'
},
{
name: '鄭爽'
}
]
}
]
}
},
methods: {
check(item,list,index) {
var tmpIndex = item.isChecked.indexOf(index);
// -1就是選中狀態
if(tmpIndex != -1){
item.isChecked.splice(tmpIndex,1);
}else {
item.isChecked.push(index);
}
}
}
}
vue多選框，實現添加和刪除功能
<div class="list">
<span>可添加刪除</span>
<div class="list-group" v-for="(item,index) in items">
<div class="left">
<p>{{item.sex}}</p>
</div>
<div class="right" >
<div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">
<i class="iconfont" :class="choose.indexOf(list.name) != -1 ?'icon-yuanyixuan':'icon-yuanweixuan'"></i>
<p >{{list.name}}</p>
</div>
</div>
</div>
<div class="list-group">
<div class="left">
<p>你的選擇是</p>
</div>
<div class="right">
({{choose.join(',')}})
</div>
</div>
</div>
js
export default{
name: 'list',
data() {
return {
items: [
{
sex: '男愛豆',
introduce: [
{
name: '易烊千璽'
},
{
name: '張一山'
},
{
name: '朱亞文'
}
]
},
{
sex: '女愛豆',
introduce: [
{
name: '迪麗熱巴'
},
{
name: '楊紫'
},
{
name: '鄭爽'
}
]
}
],
choose: []
}
},
methods: {
check(item,list,index) {
var tmpIndex = this.choose.indexOf(list.name);
// -1就是選中狀態
if(tmpIndex != -1){
this.choose.splice(tmpIndex,1)
}else {
this.choose.push(list.name);
}
}
}
}