vue单选，多选，多选的内容显示在页面可删除

vue做单选只能选一个

每行可以选一个

每行可以选一个

{{item.sex}}

<div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">

{{list.name}}

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多选

终于可以多选了

{{item.sex}}

<div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">

{{list.name}}

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多选框，实现添加和删除功能

可添加删除

{{item.sex}}

<div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">

{{list.name}}

你的选择是

({{choose.join(',')}})

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