<template>
<div>
<div>
<ul>
<li v-for="(item,index) in list ":key="index"
@click="choose(index)"
:class="{active:index == current && current != ''}"
>
{{item}}
</li>
</ul>
<ul>
<li v-for="(item,index) in targetList " :key="index">
{{item}}
</li>
</ul>
</div>
<button @click="add()" type="button">add</button>
</div>
</template>
<script>
export default {
name: 'listDemo',
data () {
return {
list:[1,2,3,4,5,6,7,8,9],
current:'',
targetList:[]
}
},
components: {},
methods: {
choose(index){
this.current=index;
console.log(index)
},
add(){
this.targetList.push(this.list[this.current]);
this.current='';
console.log( this.targetList)
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div>div{
display: flex;
}
ul{
flex: 1;
}
li{
border: 1px solid pink;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
cursor: pointer;
}
li.active{
background: greenyellow;
}
</style>
