vue單選,多選,多選的內容顯示在頁面可刪除
阿新 • • 發佈:2018-12-12
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);
}
}
}
}